Slider

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.

/* GeSHi (C) 2004 - 2007 Nigel McNie (http://qbnz.com/highlighter) */ .geshifilter {font-family: monospace;} .geshifilter .imp {font-weight: bold; color: red;} .geshifilter .kw1 {color: #b1b100;} .geshifilter .kw2 {color: #000000; font-weight: bold;} .geshifilter .kw3 {color: #000066;} .geshifilter .coMULTI {color: #808080; font-style: italic;} .geshifilter .es0 {color: #000099; font-weight: bold;} .geshifilter .br0 {color: #66cc66;} .geshifilter .st0 {color: #ff0000;} .geshifilter .nu0 {color: #cc66cc;} .geshifilter .sc0 {color: #00bbdd;} .geshifilter .sc1 {color: #ddbb00;} .geshifilter .sc2 {color: #009900;}

<!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>

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:

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>

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 ~~shift+arrow~~
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.

Known Issues

Currently the text labels of a slider are not spoken by screen readers. Firefox 3 will support this type of labeling so the plan is to add support for it in the Dojo 1.2 release. Developers should take care when using text labels since a screen reader user will hear only a numeric interpretation.