Login Register

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.

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

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