Dojo Horizontal range slider with 2 input fields

Question

I would like to have a horizontal range slider with the values displayed in two different input fields. In the following source code presented in the website https://dojotoolkit.org/reference-guide/1.10/dojox/form/RangeSlider.html the values are displayed only in one input field and are separated with comma(',') string

Any help is appreciated.

Please, add the code directly to the question (without needing an external link) so people can understand what you want better. I would also add an extended explanation of what (and how) the codes does and what you want to achieve. — Mayuso

T Kambi T Kambi · Accepted Answer · 2016-10-20T13:41:55

The value property of the slider is an array, which contains both the value. You just need to populate the values in two different inputs instead of one. like below

require(["dojox/form/HorizontalRangeSlider", "dojo/dom", "dojo/domReady!"], function(HorizontalRangeSlider, dojoDom){
  
  var rangeSlider = new HorizontalRangeSlider({
    name: "rangeSlider",
    value: [2,6],
    minimum: -10,
    maximum: 10,
    intermediateChanges: true,
    style: "width:300px;",
    onChange: function(value){
      dojoDom.byId("sliderValueMin").value = value[0];
      dojoDom.byId("sliderValueMax").value = value[1];
    }
  }, "rangeSlider");
  
});

<link href="//ajax.googleapis.com/ajax/libs/dojo/1.11.2/dijit/themes/claro/claro.css" rel="stylesheet"/>
<link href="//ajax.googleapis.com/ajax/libs/dojo/1.11.2/dojox/form/resources/RangeSlider.css" rel="stylesheet"/>
<script src="//ajax.googleapis.com/ajax/libs/dojo/1.11.2/dojo/dojo.js"></script>
<body class="claro">
    <div id="rangeSlider"></div>
    <p><input type="text" id="sliderValueMin" /></p>
    <p><input type="text" id="sliderValueMax" /></p>
</body>

Dojo Horizontal range slider with 2 input fields

1 Answers