- The Book of Dojo
- Quick Installation
- Hello World
- Debugging Tutorial
- Introduction
- Part 1: Life With Dojo
- Part 2: Dijit
- Part 3: JavaScript With Dojo and Dijit
- Part 4: Testing, Tuning and Debugging
- Part 5: DojoX
- The Dojo Book, 0.4
Slider
Submitted by pwagener on Tue, 05/29/2007 - 00:10.
A slider is a scale with a handle you can drag up/down or left/right to select a value. Calling dojo.require("dijit.form.Slider") provides dijit.form.HorizontalSlider, dijit.form.VerticalSlider and all the rule and label classes.
Examples
One way you could show the user the value of your Slider is to create a textbox that the Slider fills when the user moves the Slider. The following code fills in a simple textbox called horizontalSliderValue
.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Slider Example 1</title>
<style type="text/css">
@import "http://o.aolcdn.com/dojo/1.0.0/dijit/themes/tundra/tundra.css";
@import "http://o.aolcdn.com/dojo/1.0.0/dojo/resources/dojo.css"
</style>
<script type="text/javascript" src="http://o.aolcdn.com/dojo/1.0.0/dojo/dojo.xd.js"
djConfig="parseOnLoad: true"></script>
<script type="text/javascript">
dojo.require("dojo.parser");
dojo.require("dijit.form.Slider");
</script>
</head>
<body class="tundra">
<div id="horizontalSlider" dojoType="dijit.form.HorizontalSlider"
value="5" minimum="-10" maximum="10" discreteValues="11"
intermediateChanges="true"
onChange="dojo.byId('horizontalSlider').value = arguments[0];"
handleSrc="http://o.aolcdn.com/dojo/1.0.0/dijit/themes/tundra/images/preciseSliderThumb.png"
></div>
</body></html>
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Slider Example 1</title>
<style type="text/css">
@import "http://o.aolcdn.com/dojo/1.0.0/dijit/themes/tundra/tundra.css";
@import "http://o.aolcdn.com/dojo/1.0.0/dojo/resources/dojo.css"
</style>
<script type="text/javascript" src="http://o.aolcdn.com/dojo/1.0.0/dojo/dojo.xd.js"
djConfig="parseOnLoad: true"></script>
<script type="text/javascript">
dojo.require("dojo.parser");
dojo.require("dijit.form.Slider");
</script>
</head>
<body class="tundra">
<div id="horizontalSlider" dojoType="dijit.form.HorizontalSlider"
value="5" minimum="-10" maximum="10" discreteValues="11"
intermediateChanges="true"
onChange="dojo.byId('horizontalSlider').value = arguments[0];"
handleSrc="http://o.aolcdn.com/dojo/1.0.0/dijit/themes/tundra/images/preciseSliderThumb.png"
></div>
</body></html>
You can point the handleSrc image to wherever you want. If you want to use the default handle image, just remove the handleSrc.
For a horizontal slider, you can use the HorizintalRule and HorizontalRuleLabels to create your ruler marks programmatically, reducing the amount of data being transferred over the wire:

- 20%
- 40%
- 60%
- 80%
- 0%
- 50%
- 100%
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Slider Example 2</title>
<style type="text/css">
@import "http://o.aolcdn.com/dojo/1.0.0/dijit/themes/tundra/tundra.css";
@import "http://o.aolcdn.com/dojo/1.0.0/dojo/resources/dojo.css"
</style>
<script type="text/javascript" src="http://o.aolcdn.com/dojo/1.0.0/dojo/dojo.xd.js"
djConfig="parseOnLoad: true"></script>
<script type="text/javascript">
dojo.require("dojo.parser");
dojo.require("dijit.form.Slider");
</script>
</head>
<body class="tundra">
<div id="horizontalSlider" dojoType="dijit.form.HorizontalSlider"
value="5" minimum="-10" maximum="10" discreteValues="11"
intermediateChanges="true"
showButtons="true">
<div dojoType="dijit.form.HorizontalRuleLabels" container="topDecoration"
style="height:1.2em;font-size:75%;color:gray;"></div>
<ol dojoType="dijit.form.HorizontalRuleLabels" container="topDecoration"
style="height:1em;font-size:75%;color:gray;">
<li> </li>
<li>20%</li>
<li>40%</li>
<li>60%</li>
<li>80%</li>
<li> </li>
</ol>
<div dojoType="dijit.form.HorizontalRule" container="bottomDecoration"
count=5 style="height:5px;"></div>
<ol dojoType="dijit.form.HorizontalRuleLabels" container="bottomDecoration"
style="height:1em;font-size:75%;color:gray;">
<li>0%</li>
<li>50%</li>
<li>100%</li>
</ol>
</div>
</div>
</body></html>
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Slider Example 2</title>
<style type="text/css">
@import "http://o.aolcdn.com/dojo/1.0.0/dijit/themes/tundra/tundra.css";
@import "http://o.aolcdn.com/dojo/1.0.0/dojo/resources/dojo.css"
</style>
<script type="text/javascript" src="http://o.aolcdn.com/dojo/1.0.0/dojo/dojo.xd.js"
djConfig="parseOnLoad: true"></script>
<script type="text/javascript">
dojo.require("dojo.parser");
dojo.require("dijit.form.Slider");
</script>
</head>
<body class="tundra">
<div id="horizontalSlider" dojoType="dijit.form.HorizontalSlider"
value="5" minimum="-10" maximum="10" discreteValues="11"
intermediateChanges="true"
showButtons="true">
<div dojoType="dijit.form.HorizontalRuleLabels" container="topDecoration"
style="height:1.2em;font-size:75%;color:gray;"></div>
<ol dojoType="dijit.form.HorizontalRuleLabels" container="topDecoration"
style="height:1em;font-size:75%;color:gray;">
<li> </li>
<li>20%</li>
<li>40%</li>
<li>60%</li>
<li>80%</li>
<li> </li>
</ol>
<div dojoType="dijit.form.HorizontalRule" container="bottomDecoration"
count=5 style="height:5px;"></div>
<ol dojoType="dijit.form.HorizontalRuleLabels" container="bottomDecoration"
style="height:1em;font-size:75%;color:gray;">
<li>0%</li>
<li>50%</li>
<li>100%</li>
</ol>
</div>
</div>
</body></html>
The VerticalSlider API is identical to the HorizontalSlider API. You can use the VerticalRule class to create vertical ruler marks.
dijit.form.HorizontalSlider, dijit.form.VerticalSlider
A form widget that allows one to select a value with a horizontally (or vertically) draggable image
|
||
Attributes
|
||
clickSelect | boolean true |
If clicking the progress bar changes the value or not |
discreteValues | integer Infinity |
The maximum allowed values dispersed evenly between minimum and maximum (inclusive). |
intermediateChanges | Boolean false |
If true, trigger an onChange event every time setValue is called. If false, trigger onChange only when asked by the callee. For example, on Slider a true value would fire onChange events at each point of the mouse drag. False would trigger onChange only on mouseUp. |
maximum | integer 100 |
The maximum allowed value. |
minimum | integer 0 |
The minimum value allowed. |
pageIncrement | integer 2 |
The amount of change with pageup/pagedown |
showButtons | boolean true |
Show increment/decrement buttons at the ends of the slider? |
Methods
|
||
setValue((/*Number*/ value, /*Boolean, optional*/ priorityChange) | Regular setValue, but if priorityChange is true, then it is more likely to be animated. |
dijit.form.HorizontalRule, dijit.form.VerticalRule
Create hash marks for the Horizontal/Vertical slider
|
||
Attributes
|
||
container | Node containerNode |
If this is a child widget, connect it to this parent node |
count | Integer 3 |
Number of hash marks to generate |
ruleStyle | String | CSS style to apply to individual hash marks |
dijit.form.HorizontalRuleLabels, dijit.form.VerticalRuleLabels
Create labels for the Slider
|
||
Attributes
|
||
labels | Array [] |
Array of text labels to render - evenly spaced from left-to-right or bottom-to-top |
labelStyle | String | CSS style to apply to individual text labels |
Accessibility (added for 1.1 but true for 1.0 as well)
Keyboard
Action | Key |
---|---|
Interact with the slider | The slider handle is in the tab order of the page. Press tab key to set focus to the slider handle. |
Increase slider value by single increment | With focus on slider handle press right or up arrow |
Decrease slider value by single increment | With focus on slider handle press left or down arrow |
Increase slider value by multiple increments | With focus on slider handle press pageup. The amount of increment is determined by the pageIncrement parameter |
Decrease slider value by multiple increments | With focus on slider handle press pagedown. The amount of increment is determined by the pageIncrement parameter |
Set slider to minimum value | With focus on slider handle press home. |
Set slider to maximum value | With focus on slider handle press end. |
- Printer-friendly version
- Login or register to post comments
- Subscribe post
HorizontalRule/HorizontalRuleLabels problem in IE 6.0
If you use the above Slider code HorizontalSlider(Slider) + HorizontalRule(hashmarks under slider) + HorizontalRuleLabel(labels above and below it)....all the 3 of them work togethor in FF but in IE only Slider is visible...the HorizontalRule and HorizontalRuleLabel are not visible.
Has anybody encountered this and found a workaround....