This example demonstrates a horizontal dual-thumb Slider with custom code to add a highlight to the bounded range. Some characteristics to note include the following:
Range offsets: 0 - 300
DualSlider does not come prebuilt with support for a range highlight. This example demonstrates how to add this functionality to a DualSlider.
You supply your own markup for the slider. Keep in mind the following points about markup for YUI Dual Thumb Slider Control implementations:
<img>elements rather than a CSS background for the thumbs to get around a performance bottleneck when animating thumb positions in IE.
absoluteand be initially placed at the zero position of the background. Set their initial position in the constructor if desired.
The example will use the css sprites technique to change the color of the highlight based on assigned classes.
Here we add an additional
span element to use as our highlight.
Note: You are viewing this example in debug mode with logging enabled. This can significantly slow performance.