Login Register

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>

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:

  1.  
  2. 20%
  3. 40%
  4. 60%
  5. 80%
  6.  
  1. 0%
  2. 50%
  3. 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

ActionKey
Interact with the sliderThe 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 incrementWith focus on slider handle press right or up arrow
Decrease slider value by single incrementWith focus on slider handle press left or down arrow
Increase slider value by multiple incrementsWith focus on slider handle press pageup. The amount of increment is determined by the pageIncrement parameter
Decrease slider value by multiple incrementsWith focus on slider handle press pagedown. The amount of increment is determined by the pageIncrement parameter
Set slider to minimum valueWith focus on slider handle press home.
Set slider to maximum valueWith 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.

‹ NumberSpinnerupTextarea ›

HorizontalRule/HorizontalRuleLabels problem in IE 6.0

Submitted by hrishi14 on Fri, 03/14/2008 - 12:38.

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

Rule labels explanation

Submitted by nileshbansal on Sun, 04/20/2008 - 06:48.

The tutorial does not mention how the rule lables work. I mean, what is the meaning of count=5? Also, how can I remove the % values showing up on the slider bar (i am using only simple numbers 1 to 10 in my app, but its still showing the 0% and 100% mark).

Great, did they break this too, with 1.1.1?

Submitted by blahblahblah on Wed, 07/02/2008 - 07:18.

 

Great. Except that there is no "dojo.xd.js" file whatsoever in the 1.1.1 release.

Is there any sample code that will work with the 1.1.1 release? More to the point, is there some point when one release won't break everything that came before it?

Or should we all just switch to scriptaculous?