Skip to Content | Skip to Navigation


dojox.form.RangeSlider

Authors:?–
Project owner:?–
since:V?

The RangeSlider is a descendant of dijit/form/HorizontalSlider and dijit/form/VerticalSlider 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