Dojo水平范围滑块,带有2个输入字段

时间:2016-10-20 10:13:29

标签: javascript dojo slider range

我想要一个水平范围滑块,其值显示在两个不同的输入字段中。 在网站https://dojotoolkit.org/reference-guide/1.10/dojox/form/RangeSlider.html中显示的以下源代码中,值仅显示在一个输入字段中,并以逗号(',')字符串

分隔

感谢任何帮助。

1 个答案:

答案 0 :(得分:1)

滑块的value属性是一个数组,它包含两个值。您只需要在两个不同的输入中填充值而不是一个。如下所示

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>