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

YUI Logger Output:

Note: Logging and debugging is currently turned off for this example.

Reload with logging
and debugging enabled.

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

Building a dual thumb Slider

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

YUI Logger Output:

Slider Control Examples:

More Slider Control Resources: