This example demonstrates a simple horizontal dual-thumb Slider implementation. Some characteristics to note include the following:
Raw values:
MIN: 600
MAX: 650
You supply your own markup for the slider. Keep in mind the following points about markup for YUI Dual Thumb Slider Control implementations:
<img>
elements rather than a CSS background for the thumbs to get around a performance bottleneck when animating thumb positions in IE.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 | ? |
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.
Note: Logging and debugging is currently turned off for this example.
Copyright © 2009 Yahoo! Inc. All rights reserved.
Privacy Policy - Terms of Service - Copyright Policy - Job Openings