YUI Library Home

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

Slider Control: 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.

View example in new window.

Raw values:

Converted values:

MIN: 600
MAX: 650

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:

1<div id="demo_bg" class="yui-h-slider" title="Range slider"> 
2    <div id="demo_min_thumb" class="yui-slider-thumb"><img src="http://yui.yahooapis.com/2.7.0/build/slider/assets/left-thumb.png"></div> 
3    <div id="demo_max_thumb" class="yui-slider-thumb"><img src="http://yui.yahooapis.com/2.7.0/build/slider/assets/right-thumb.png"></div> 
4</div> 
5 
6<p>Raw values:  
7<label>Min: <input type="text" id="demo_from" size="3" maxlength="3" value="0"></label> 
8 
9<label>Max: <input type="text" id="demo_to" size="3" maxlength="3" value="200"></label> 
10 
11<button id="demo_btn">Update Slider</button> 
12 
13<h3>Converted values:</h3> 
14<p id="demo_info"></p> 
view plain | print | ?

Code:

1(function () { 
2    YAHOO.namespace('example'); 
3 
4    var Dom = YAHOO.util.Dom; 
5 
6    // Slider has a range of 200 pixels 
7    var range = 200; 
8 
9    // No ticks for this example 
10    var tickSize = 0; 
11 
12    // We'll set a minimum distance the thumbs can be from one another 
13    var minThumbDistance = 10; 
14 
15    // Initial values for the thumbs 
16    var initValues = [100,130]; 
17 
18    // Conversion factor from 0-200 pixels to 100-1000 
19    // Note 20 pixels are subtracted from the range to account for the 
20    // thumb values calculated from their center point (10 pixels from 
21    // the center of the left thumb + 10 pixels from the center of the 
22    // right thumb) 
23    var cf = 900/(range - 20); 
24 
25    // Set up a function to convert the min and max values into something useful 
26    var convert = function (val) { 
27        return Math.round(val * cf + 100); 
28    }; 
29 
30    // Slider set up is done when the DOM is ready 
31    YAHOO.util.Event.onDOMReady(function () { 
32        var demo_bg = Dom.get("demo_bg"), 
33            info    = Dom.get("demo_info"), 
34            from    = Dom.get("demo_from"), 
35            to      = Dom.get("demo_to"); 
36 
37        // Create the DualSlider 
38        var slider = YAHOO.widget.Slider.getHorizDualSlider(demo_bg, 
39            "demo_min_thumb", "demo_max_thumb", 
40            range, tickSize, initValues); 
41 
42        slider.minRange = minThumbDistance; 
43         
44        // Custom function to update the text fields, the converted value 
45        // report and the slider's title attribute 
46        var updateUI = function () { 
47            from.value = slider.minVal; 
48            to.value   = slider.maxVal; 
49 
50            // Update the converted values and the slider's title. 
51            // Account for the thumb width offsetting the value range by 
52            // subtracting the thumb width from the max value. 
53            var min = convert(slider.minVal), 
54                max = convert(slider.maxVal - 20); 
55 
56            info.innerHTML = "MIN: <strong>" + min + "</strong><br>" + 
57                             "MAX: <strong>" + max + "</strong>"; 
58            demo_bg.title  = "Current range " + min + " - " + max; 
59        }; 
60 
61        // Subscribe to the dual thumb slider's change and ready events to 
62        // report the state. 
63        slider.subscribe('ready', updateUI); 
64        slider.subscribe('change', updateUI); 
65 
66        // Wire up the button to update the slider 
67        YAHOO.util.Event.on('demo_btn','click',function () { 
68            // Get the int values from the inputs 
69            var min = Math.abs(parseInt(from.value,10)|0), 
70                max = Math.abs(parseInt(to.value,10)|0); 
71 
72            if (min > max) { 
73                var hold = min; 
74                min = max; 
75                max = hold; 
76            } 
77 
78            // Verify the values are in range 
79            min = Math.min(min,range - 30); 
80            max = Math.max(Math.min(max,range),min + 20 + minThumbDistance); 
81 
82            // Set the new values on the slider 
83            slider.setValues(min,max); 
84        }); 
85        // Attach the slider to the YAHOO.example namespace for public probing 
86        YAHOO.example.slider = slider; 
87    }); 
88})(); 
view plain | print | ?

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: Logging and debugging is currently turned off for this example.

Reload with logging
and debugging enabled.

More Slider Control Resources:

Copyright © 2009 Yahoo! Inc. All rights reserved.

Privacy Policy - Terms of Service - Copyright Policy - Job Openings