YUI Library JavaScript DHTML


            



    
Horizontal Slider with two thumbs

/*margin and padding on body element
  can introduce errors in determining
  element position and are not recommended;
  we turn them off as a foundation for YUI
  CSS treatments. */
body {
  margin:0;
  padding:0;
}










Horizontal Slider with two thumbs


  This example demonstrates a simple horizontal dual-thumb Slider implementation.  Some characteristics to note include the following:


    The thumbs are set on a slide bar with a 200 pixel range.

    A minimum distance is provided, preventing the thumbs from coming within 10 pixels of each other.

    Initial min and max values are supplied as 100 and 130 respectively.

    Clicking on the background will animate the nearest thumb.

    Min and Max value offsets are calculated from the center of the thumbs and must be accounted for conversion calculations.



Raw values: 
Min: 
Max: 
Update Slider
Converted values:



(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;
    });
})();





   
   
yui_2.7.0b.zip( 4,431 k)