Horizo​​ntalSlider的连续范围

时间:2017-06-22 12:00:15

标签: javascript dojo

我正在使用Dojo Horizo​​ntalSlider in my app.

目前,当您拖动滑块时,它会在我指定的范围之间以1步整数间隔跳转。我需要它更精确并允许浮动值(例如3.24 - 7.51)。

以上链接只是一个公共服务的示例。我的范围实际上在0-10之间。

HTML

 <div id="pixelSlider" data-dojo-type="dojox/form/HorizontalRangeSlider" data-dojo-props="showButtons:'false', intermediateChanges:'false', slideDuration:'0'">
        <div data-dojo-type="dijit/form/HorizontalRule"></div>

的Javascript

  var slider = registry.byId("pixelSlider");     
  var sliderMin = 0;  
  var sliderMax = 4000;  
  slider.minimum = sliderMin;
  slider.maximum = sliderMax;
  slider.value = [sliderMin, sliderMax];

我有很少的Javascript经验,但一直在努力调整应用程序以反映我需要的行为。我从dojo samples看到你可以指定一个滑块来使用discreteValues,但是我没有这样做,所以假设它会允许选择非整数范围?有人可以让我摆脱痛苦。我相信这一定很简单。

修改 试图使用离散值而不是雪茄:

enter image description here

1 个答案:

答案 0 :(得分:1)

我认为离散值是你想要的。离散值并不意味着指定可能值的列表,而是指定滑块上可以包含的值的数量。因此,如果要在1到10之间滑动,并且有两个小数位,则将discreteValues设置为100。

编辑:

虽然可能工作范围滑块似乎支持开箱即用的连续值,所以我不清楚你做错了什么

http://jsfiddle.net/d43azsvw/

require([
"dojox/form/HorizontalRangeSlider",
"dijit/form/HorizontalRuleLabels"
], function (HorizontalRangeSlider, HorizontalRuleLabels) {

var min = 0;
var max = 10;

var slider = new HorizontalRangeSlider({
    minium: min,
  maximum: max,
    style: "width:300px;",
}, "yearSliderNode");
slider.onChange = function(evt) {
console.log(evt)
}

var sliderLabel = new HorizontalRuleLabels({
    container: 'topDecoration',
    minimum: min,
    maximum: max,
    count: 11,
    numericMargin: 0,

    constraints: {pattern: '#.#'}
   }, "sliderLabelsNode");

  });