YUI Library Home

YUI Library Examples: Slider Control: Dual-thumb Slider with range highlight

Slider Control: Dual-thumb Slider with range highlight

This example demonstrates a horizontal dual-thumb Slider with custom code to add a highlight to the bounded range. Some characteristics to note include the following:

  • The thumbs are set on a slide bar with a 300 pixel range.
  • The thumbs are configured with a 12 pixel tick size.
  • Clicking on the background will animate the nearest thumb.

Range offsets: 0 - 300

Status: ok

Adding a range highlight to a dual thumb Slider

DualSlider does not come prebuilt with support for a range highlight. This example demonstrates how to add this functionality to a DualSlider.

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.
  • The background element should have an explicit CSS position: relative or absolute.
  • Both thumb elements should have an explicit CSS position: absolute and be initially placed at the zero position of the background. Set their initial position in the constructor if desired.

CSS:

The example will use the css sprites technique to change the color of the highlight based on assigned classes.

1#demo_bg { 
2    positionrelative
3    backgroundurl(../slider/assets/dual_thumb_bg.gif) 0 5px no-repeat
4    height28px
5    width310px
6} 
7
8#demo_bg div { 
9    positionabsolute
10    cursordefault
11    top4px
12} 
13 
14/* Here's the highlight element */ 
15#demo_bg span { 
16    positionabsolute
17    backgroundurl(../slider/assets/dual_thumb_highlight.gif) 0 0 repeat-x
18    top10px
19    left12px
20    height13px
21    width288px
22} 
23
24#demo_bg .caution { 
25    background-position0 -13px
26} 
27#demo_bg .boom, 
28#demo_bg .danger { 
29    background-position0 -26px
30} 
31 
32/* We'll use the same class names for the status report region */ 
33p .ok { 
34    color: #3a3
35    font-weightbold
36    text-transformuppercase
37} 
38p .caution { 
39    background: #ff3
40    color: #770
41    font-weightbold
42    font-styleitalic
43    padding0 1ex; 
44    text-transformuppercase
45} 
46p .danger { 
47    color: #f33
48    font-weightbold
49    text-decorationblink
50    text-transformuppercase
51} 
52p .boom { 
53    color: #fff; 
54    background: #000
55    padding0 1ex; 
56} 
view plain | print | ?

Markup:

Here we add an additional span element to use as our highlight.

1<div id="demo_bg" title="Range slider"
2    <span id="demo_highlight"></span> 
3    <div id="demo_min_thumb"><img src="assets/l-thumb-round.gif"></div> 
4    <div id="demo_max_thumb"><img src="assets/r-thumb-round.gif"></div> 
5</div> 
6<p>Thumb values: <span id="demo_range"></span></p
7<p>Status: <span id="demo_value"></span></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 300 pixels 
7    var range = 300; 
8 
9    // Set up 12 pixel ticks 
10    var tickSize = 12; 
11 
12    // Some arbitrary ranges to cue status changes 
13    var caution_range = 150, 
14        danger_range  = 75, 
15        boom_range    = 13; 
16 
17    YAHOO.util.Event.onDOMReady(function () { 
18        var reportSpan     = Dom.get("demo_range"); 
19        var calculatedSpan = Dom.get("demo_value"); 
20 
21        // Create the DualSlider 
22        var slider = YAHOO.widget.Slider.getHorizDualSlider("demo_bg"
23            "demo_min_thumb""demo_max_thumb"
24            range, tickSize); 
25         
26        // Decorate the DualSlider instance with some new properties and 
27        // methods to maintain the highlight element 
28        YAHOO.lang.augmentObject(slider, { 
29 
30            // The current status 
31            _status : 'ok'
32 
33            // The highlight element 
34            _highlight : Dom.get("demo_highlight"), 
35 
36            // A simple getter method for the status 
37            getStatus : function () { return this._status; }, 
38 
39            // A method to update the status and update the highlight 
40            updateHighlight : function () { 
41                var delta = this.maxVal - this.minVal, 
42                    newStatus = 'ok'
43                 
44                if (delta < boom_range) { 
45                    newStatus = 'boom'
46                } else if (delta < danger_range) { 
47                    newStatus = 'danger'
48                } else if (delta < caution_range) { 
49                    newStatus = 'caution'
50                } 
51 
52                if (this._status !== newStatus) { 
53                    // Update the highlight class if status is changed 
54                    Dom.replaceClass(this._highlight,this._status,newStatus); 
55                    this._status = newStatus; 
56                } 
57                if (this.activeSlider === this.minSlider) { 
58                    // If the min thumb moved, move the highlight's left edge 
59                    Dom.setStyle(this._highlight,'left', (this.minVal + 12) + 'px'); 
60                } 
61                // Adjust the width of the highlight to match inner boundary 
62                Dom.setStyle(this._highlight,'width', Math.max(delta - 12,0) + 'px'); 
63            } 
64        },true); 
65 
66        // Attach the highlight method to the slider's change event 
67        slider.subscribe('change',slider.updateHighlight,slider,true); 
68 
69        // Create an event callback to update some display fields 
70        var report = function () { 
71            reportSpan.innerHTML = slider.minVal + ' - ' + slider.maxVal; 
72            // Call our conversion function 
73            calculatedSpan.innerHTML = 
74            calculatedSpan.className = slider.getStatus(); 
75        }; 
76 
77        // Subscribe to the slider's change event to report the status. 
78        slider.subscribe('change',report); 
79 
80        // Attach the slider to the YAHOO.example namespace for public probing 
81        YAHOO.example.slider = slider; 
82    }); 
83})(); 
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.

Copyright © 2009 Yahoo! Inc. All rights reserved.

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