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

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	position: relative;
3	background: url(../slider/assets/dual_thumb_bg.gif) 0 5px no-repeat;
4	height: 28px;
5	width: 310px;
6	}
7
8	#demo_bg div {
9	position: absolute;
10	cursor: default;
11	top: 4px;
12	}
13
14	/* Here's the highlight element */
15	#demo_bg span {
16	position: absolute;
17	background: url(../slider/assets/dual_thumb_highlight.gif) 0 0 repeat-x;
18	top: 10px;
19	left: 12px;
20	height: 13px;
21	width: 288px;
22	}
23
24	#demo_bg .caution {
25	background-position: 0 -13px;
26	}
27	#demo_bg .boom,
28	#demo_bg .danger {
29	background-position: 0 -26px;
30	}
31
32	/* We'll use the same class names for the status report region */
33	p .ok {
34	color: #3a3;
35	font-weight: bold;
36	text-transform: uppercase;
37	}
38	p .caution {
39	background: #ff3;
40	color: #770;
41	font-weight: bold;
42	font-style: italic;
43	padding: 0 1ex;
44	text-transform: uppercase;
45	}
46	p .danger {
47	color: #f33;
48	font-weight: bold;
49	text-decoration: blink;
50	text-transform: uppercase;
51	}
52	p .boom {
53	color: #fff;
54	background: #000;
55	padding: 0 1ex;
56	}
	view plain \| print \| ?

#demo_bg {
    position: relative;
    background: url(../slider/assets/dual_thumb_bg.gif) 0 5px no-repeat;
    height: 28px;
    width: 310px;
}

#demo_bg div {
    position: absolute;
    cursor: default;
    top: 4px;
}

/* Here's the highlight element */
#demo_bg span {
    position: absolute;
    background: url(../slider/assets/dual_thumb_highlight.gif) 0 0 repeat-x;
    top: 10px;
    left: 12px;
    height: 13px;
    width: 288px;
}

#demo_bg .caution {
    background-position: 0 -13px;
}
#demo_bg .boom,
#demo_bg .danger {
    background-position: 0 -26px;
}

/* We'll use the same class names for the status report region */
p .ok {
    color: #3a3;
    font-weight: bold;
    text-transform: uppercase;
}
p .caution {
    background: #ff3;
    color: #770;
    font-weight: bold;
    font-style: italic;
    padding: 0 1ex;
    text-transform: uppercase;
}
p .danger {
    color: #f33;
    font-weight: bold;
    text-decoration: blink;
    text-transform: uppercase;
}
p .boom {
    color: #fff;
    background: #000;
    padding: 0 1ex;
}

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

(function () {
    YAHOO.namespace('example');

var Dom = YAHOO.util.Dom;

// Slider has a range of 300 pixels
    var range = 300;

// Set up 12 pixel ticks
    var tickSize = 12;

// Some arbitrary ranges to cue status changes
    var caution_range = 150,
        danger_range  = 75,
        boom_range    = 13;

YAHOO.util.Event.onDOMReady(function () {
        var reportSpan     = Dom.get("demo_range");
        var calculatedSpan = Dom.get("demo_value");

// Create the DualSlider
        var slider = YAHOO.widget.Slider.getHorizDualSlider("demo_bg",
            "demo_min_thumb", "demo_max_thumb",
            range, tickSize);
        
        // Decorate the DualSlider instance with some new properties and
        // methods to maintain the highlight element
        YAHOO.lang.augmentObject(slider, {

// The current status
            _status : 'ok',

// The highlight element
            _highlight : Dom.get("demo_highlight"),

// A simple getter method for the status
            getStatus : function () { return this._status; },

// A method to update the status and update the highlight
            updateHighlight : function () {
                var delta = this.maxVal - this.minVal,
                    newStatus = 'ok';
                
                if (delta < boom_range) {
                    newStatus = 'boom';
                } else if (delta < danger_range) {
                    newStatus = 'danger';
                } else if (delta < caution_range) {
                    newStatus = 'caution';
                }

if (this._status !== newStatus) {
                    // Update the highlight class if status is changed
                    Dom.replaceClass(this._highlight,this._status,newStatus);
                    this._status = newStatus;
                }
                if (this.activeSlider === this.minSlider) {
                    // If the min thumb moved, move the highlight's left edge
                    Dom.setStyle(this._highlight,'left', (this.minVal + 12) + 'px');
                }
                // Adjust the width of the highlight to match inner boundary
                Dom.setStyle(this._highlight,'width', Math.max(delta - 12,0) + 'px');
            }
        },true);

// Attach the highlight method to the slider's change event
        slider.subscribe('change',slider.updateHighlight,slider,true);

// Create an event callback to update some display fields
        var report = function () {
            reportSpan.innerHTML = slider.minVal + ' - ' + slider.maxVal;
            // Call our conversion function
            calculatedSpan.innerHTML =
            calculatedSpan.className = slider.getStatus();
        };

// Subscribe to the slider's change event to report the status.
        slider.subscribe('change',report);

// 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 Logger Output:

Note: You are viewing this example in debug mode with logging enabled. This can significantly slow performance.

Reload with logging
and debugging disabled.