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

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 \| ?

(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 Library Examples: Slider Control: Horizontal Slider with two thumbs

Building a dual thumb Slider

Configuration for This Example

YUI Logger Output:

Logger Console

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:

Logger Console

Slider Control Examples:

More Slider Control Resources: