Documentation
dojox.form.RangeSlider¶
Status: | Draft |
---|---|
Version: | 1.0 |
Authors: | ?– |
Project owner: | ?– |
Available: | since V? |
The RangeSlider is a descendant of dijit.form.Slider that allows a selection of a range of values.
Introduction¶
The RangeSlider differs from the dijit.form.Slider by providing two handles that allow you to select a range of values across the scale. There is the dojox.form.HorizontalRangeSlider and the dojox.form.VerticalRangeSlider which provide a horizontal and vertical version respectively.
Usage¶
The RangeSlider is used in the same fashion as most dijit Form Widgets.
<script type="text/javascript">
dojo.require("dojox.form.RangeSlider");
var rangeSlider = new dojox.form.HorizontalRangeSlider({
},"myRangeSlider");
</script>
Here are some of the constructor parameters:
Parameter | Type | Description |
---|---|---|
value | array | Initial values of the slider ([0,100]) |
showButtons | boolean | Whether to show or not buttons at each end of the slider (true) |
minimum | integer | Minimum value of the slider (0) |
maximum | integer | Maximum value of the slider (100) |
intermediateChanges | boolean | If fractional parts between steps are reported (false) |
discreteValues | integer | Number of "steps" in the slider. For example if discreteValues is 3, you'll have 3 steps: minimum, maximum and a value in the middle |
Examples¶
Programmatic horizontal example¶
<script type="text/javascript"> dojo.require("dojox.form.RangeSlider"); dojo.addOnLoad(function(){ var rangeSlider = new dojox.form.HorizontalRangeSlider({ name: "rangeSlider", value: [2,6], minimum: -10, maximum: 10, intermediateChanges: true, style: "width:300px;", onChange: function(value){ dojo.byId("sliderValue").value = value; } }, "rangeSlider"); }); </script>
<div id="rangeSlider"></div> <p><input type="text" id="sliderValue" /></p>
<style type="text/css"> @import url({{baseUrl}}dojox/form/resources/RangeSlider.css); </style>
Programmatic vertical example with rulers¶
<script type="text/javascript"> dojo.require("dojox.form.RangeSlider"); dojo.require("dijit.form.VerticalRule"); dojo.addOnLoad(function(){ var vertical = dojo.byId("vertical"); var rulesNode = document.createElement("div"); vertical.appendChild(rulesNode); var sliderRules = new dijit.form.VerticalRule({ count:11, style:"width:5px;" }, rulesNode); var slider = new dojox.form.VerticalRangeSlider({ name: "vertical", value: [2,6], minimum: -10, maximum: 10, intermediateChanges: true, style: "height:300px;" }, vertical); }); </script>
<div id="vertical"></div>
<style type="text/css"> @import url({{baseUrl}}dojox/form/resources/RangeSlider.css); </style>
Declarative horizontal example¶
<script type="text/javascript"> dojo.require("dojox.form.RangeSlider"); </script>
<div id="rangeSlider" dojoType="dojox.form.HorizontalRangeSlider" value="2,6" minimum="-10" maximum="10" intermediateChanges="true" showButtons="false" style="width:300px;"> <script type="dojo/method" event="onChange" args="value"> dojo.byId("sliderValue").value = value; </script> </div> <p><input type="text" id="sliderValue" /></p>
<style type="text/css"> @import url({{baseUrl}}dojox/form/resources/RangeSlider.css); </style>
NOTE In delarative mode, the value of the attribute value is specified as a comma delimited string and not as an array (e.g. value="2,6" and not value="[2,6]".
Accessibility¶
TODO: provide accessibility information
See also¶
- See dijit.form.Slider for more information.