ydn-js origin

YUI version 2.5.1

DualSlider background segmented into three colors

Challenge

Create a DualSlider with one color showing between the min-thumb and the far left edge, a second color between the min and max thumbs, and a third color between the max-thumb and the far right edge.

Solution

include two span elements inside the background div, use CSS to place them at each edge and color them appropriately. Subscribe to the change event of the constituent Sliders to update the width of the highlight elements.

slider min-value thumb
slider max-value thumb