使用JavaScript从HTML选择Dojo滑块的最小值

我想使用HTML选择菜单更改Dojo滑块的最小值。我尝试使用Onchange功能，但我有一些问题。这是我的起始代码。

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");
  
});

<html>
<head>
<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>
</head>
<body>
	<select id="zoneQuake" name="zoneQuake">
		<option value="1" id="one" name="one">One</span></option>
		<option value="2" id="two" name="two">Two</span></option>
	</select>
<div class="claro">
    <div id="rangeSlider"></div>
    <p><input type="text" id="sliderValueMin" /></p>
    <p><input type="text" id="sliderValueMax" /></p>
</div>
</body>
</html>

代码在哪里，您尝试更新滑块值？还有不需要的"标签。

这是您可以做到的。

require(["dojox/form/HorizontalRangeSlider", "dojo/dom", "dojo/on", "dijit/registry", "dijit/form/Select", "dojo/domReady!"], function(HorizontalRangeSlider, dojoDom, on,  registry){
  var zoneQuakeNode = dojoDom.byId("zoneQuake");
  on(zoneQuakeNode, "change", function(evt){
    var max = rangeSlider.value[1];
    rangeSlider.set("value", [evt.target.value, max]);
  });
  
  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");
  
});

<html>
<head>
<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>
</head>
<body>
	<select id="zoneQuake" name="zoneQuake" >
		<option value="1" id="one" name="one">One</option>
		<option value="2" id="two" name="two">Two</option>
	</select>
<div class="claro">
    <div id="rangeSlider"></div>
    <p><input type="text" id="sliderValueMin" /></p>
    <p><input type="text" id="sliderValueMax" /></p>
</div>
</body>
</html>

相关内容

最新更新

热门标签：