dojox.form.RangeSlider¶
| Authors: | ?– |
|---|---|
| Project owner: | ?– |
| 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.
dojo.require("dojox.form.RangeSlider");
var rangeSlider = new dojox.form.HorizontalRangeSlider({
}, "myRangeSlider");
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¶
dojo.require("dojox.form.RangeSlider");
dojo.ready(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");
});
<div id="rangeSlider"></div>
<p><input type="text" id="sliderValue" /></p>
@import url({{baseUrl}}dojox/form/resources/RangeSlider.css);
Programmatic vertical example with rulers¶
dojo.require("dojox.form.RangeSlider");
dojo.require("dijit.form.VerticalRule");
dojo.ready(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);
});
<div id="vertical"></div>
@import url({{baseUrl}}dojox/form/resources/RangeSlider.css);
Declarative horizontal example¶
dojo.require("dojox.form.RangeSlider");
<div id="rangeSlider" data-dojo-type="dojox.form.HorizontalRangeSlider"
data-dojo-props="value:[2,6], minimum:-10, maximum:10, intermediateChanges:true,
showButtons:false" style="width:300px;">
<script type="dojo/method" data-dojo-event="onChange" data-dojo-args="value">
dojo.byId("sliderValue").value = value;
</script>
</div>
<p><input type="text" id="sliderValue" /></p>
@import url({{baseUrl}}dojox/form/resources/RangeSlider.css);
NOTE In declarative 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.