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	_font-size: 5px; /* prevent IE6 expanding the box height to font-size */
19	top: 10px;
20	left: 12px;
21	height: 13px;
22	width: 288px;
23	}
24
25	#demo_bg .caution {
26	background-position: 0 -13px;
27	}
28	#demo_bg .boom,
29	#demo_bg .danger {
30	background-position: 0 -26px;
31	}
32
33	/* We'll use the same class names for the status report region */
34	p .ok {
35	color: #3a3;
36	font-weight: bold;
37	text-transform: uppercase;
38	}
39	p .caution {
40	background: #ff3;
41	color: #770;
42	font-weight: bold;
43	font-style: italic;
44	padding: 0 1ex;
45	text-transform: uppercase;
46	}
47	p .danger {
48	color: #f33;
49	font-weight: bold;
50	text-decoration: blink;
51	text-transform: uppercase;
52	}
53	p .boom {
54	color: #fff;
55	background: #000;
56	padding: 0 1ex;
57	}
	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;
    _font-size: 5px; /* prevent IE6 expanding the box height to font-size */
    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;
    });
})();

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.