YUI Library Examples: Slider Control: Horizontal Slider with two thumbs

Yahoo! recommends YUI 3. Learn about YUI 3 on YUILibrary.com.

Building a dual thumb Slider

You supply your own markup for the slider. Keep in mind the following points about markup for YUI Dual Thumb Slider Control implementations:

The thumb elements should be children of the slider background.
We use <img> elements rather than a CSS background for the thumbs to get around a performance bottleneck when animating thumb positions in IE.
Don't apply a CSS border to the slider background.
We use the Sam skin and thumb images left-thumb.png and right-thumb.png.

Markup:

Code:

(function () {
    YAHOO.namespace('example');

var Dom = YAHOO.util.Dom;

// Slider has a range of 200 pixels
    var range = 200;

// No ticks for this example
    var tickSize = 0;

// We'll set a minimum distance the thumbs can be from one another
    var minThumbDistance = 10;

// Initial values for the thumbs
    var initValues = [100,130];

// Conversion factor from 0-200 pixels to 100-1000
    // Note 20 pixels are subtracted from the range to account for the
    // thumb values calculated from their center point (10 pixels from
    // the center of the left thumb + 10 pixels from the center of the
    // right thumb)
    var cf = 900/(range - 20);

// Set up a function to convert the min and max values into something useful
    var convert = function (val) {
        return Math.round(val * cf + 100);
    };

// Slider set up is done when the DOM is ready
    YAHOO.util.Event.onDOMReady(function () {
        var demo_bg = Dom.get("demo_bg"),
            info    = Dom.get("demo_info"),
            from    = Dom.get("demo_from"),
            to      = Dom.get("demo_to");

// Create the DualSlider
        var slider = YAHOO.widget.Slider.getHorizDualSlider(demo_bg,
            "demo_min_thumb", "demo_max_thumb",
            range, tickSize, initValues);

slider.minRange = minThumbDistance;
        
        // Custom function to update the text fields, the converted value
        // report and the slider's title attribute
        var updateUI = function () {
            from.value = slider.minVal;
            to.value   = slider.maxVal;

// Update the converted values and the slider's title.
            // Account for the thumb width offsetting the value range by
            // subtracting the thumb width from the max value.
            var min = convert(slider.minVal),
                max = convert(slider.maxVal - 20);

info.innerHTML = "MIN: " + min + " " +
 "MAX: " + max + "";
 demo_bg.title = "Current range " + min + " - " + max;
 };

// Subscribe to the dual thumb slider's change and ready events to
        // report the state.
        slider.subscribe('ready', updateUI);
        slider.subscribe('change', updateUI);

// Wire up the button to update the slider
        YAHOO.util.Event.on('demo_btn','click',function () {
            // Get the int values from the inputs
            var min = Math.abs(parseInt(from.value,10)|0),
                max = Math.abs(parseInt(to.value,10)|0);

if (min > max) {
                var hold = min;
                min = max;
                max = hold;
            }

// Verify the values are in range
            min = Math.min(min,range - 30);
            max = Math.max(Math.min(max,range),min + 20 + minThumbDistance);

// Set the new values on the slider
            slider.setValues(min,max);
        });
        // Attach the slider to the YAHOO.example namespace for public probing
        YAHOO.example.slider = slider;
    });
})();

Configuration for This Example

You can load the necessary JavaScript and CSS for this example from Yahoo's servers. Click here to load the YUI Dependency Configurator with all of this example's dependencies preconfigured.

YUI Logger Output:

Note: You are viewing this example in debug mode with logging enabled. This can significantly slow performance.

Reload with logging
and debugging disabled.

YUI Library Examples: Slider Control: Horizontal Slider with two thumbs

Building a dual thumb Slider

Configuration for This Example

YUI Logger Output:

Slider Control Examples:

More Slider Control Resources:

YUI Library Examples: Slider Control: Horizontal Slider with two thumbs

Slider Control: Horizontal Slider with two thumbs

Converted values:

Building a dual thumb Slider

Configuration for This Example

YUI Logger Output:

Slider Control Examples:

More Slider Control Resources: