nouislider 具有自定义值而不是范围答案

【问题标题】：nouislider with custom values instead of rangenouislider 具有自定义值而不是范围
【发布时间】：2014-02-28 08:59:09
【问题描述】：

我喜欢 noUIslider 滑块，但我需要应用自定义值而不是范围和步长选项，因为我的值没有流畅地变化。

因此，例如：范围 [10,90] 步骤：5

我想使用：

值 [0,10, 15.5, 18, 41 等...]

有可能吗？

谢谢

【问题讨论】：

标签： javascript jquery slider range uislider

【解决方案1】：

解决方案是范围选项。您必须使用滑块上的位置值、该位置的值以及到下一个值的距离来创建一个对象。

var rangers = {}
for (i = 0; i < filterLength.length; ++i) {
  var prozent = Math.ceil((100/filterLength.length) * i)
  if ( i < filterLength.length-1 ) { rangers[prozent+'%'] = [ filterLength[i],  filterLength[i+1] - filterLength[i] ] }
  if ( i == filterLength.length-1 ) { rangers['max'] = [filterLength[filterLength.length-1]]; }
}

$("#slider-length").noUiSlider({
  start: [ filterLength[0], filterLength[filterLength.length-1] ],
  range: rangers
});

【讨论】：

【解决方案2】：

您可以设置自定义非线性值。

range: {
    'min': [ 0 ],
    '10%': [ 500, 500 ],
    '50%': [ 4000, 1000 ],
    'max': [ 10000 ]
},

在此处查看示例http://refreshless.com/nouislider/examples/non-linear

【讨论】：

【解决方案3】：

我使用 TypeScript 来解决这个问题您可能不需要词 this 并以不同的方式定义您的数字数组。

两个手柄的范围：

intRangeeeee: number[] = [];
  rangers = {};    
for (let i = 0; i < this.intRangeeeee.length; ++i) {
          var prozent = Math.ceil((100 / this.intRangeeeee.length) * i)
          if (prozent === 0) {
            this.rangers['min'] = [this.intRangeeeee[i], this.intRangeeeee[i + 1] - 
            this.intRangeeeee[i]];
          } else {
            if ( i < this.intRangeeeee.length-1 ) { this.rangers[prozent+'%'] = [ this.intRangeeeee[i],  this.intRangeeeee[i+1] - this.intRangeeeee[i] ] }
          }
          
          if ( i == this.intRangeeeee.length-1 ) { this.rangers['max'] = [this.intRangeeeee[this.intRangeeeee.length-1]]; }
        }

而且只有一个手柄

for (let i = 0; i < this.intRangeeeee.length; ++i) {
      var prozent = Math.ceil((100 / this.intRangeeeee.length) * i)
      if (prozent === 0) {
        this.rangers['min'] = [this.intRangeeeee[i]];
      } else {
        if ( i < this.intRangeeeee.length-1 ) { this.rangers[prozent+'%'] = [this.intRangeeeee[i]] }
      }
      if ( i == this.intRangeeeee.length-1 ) { this.rangers['max'] = [this.intRangeeeee[this.intRangeeeee.length-1]]; }
    }

this.mySlider = {
      connect: [true,false],
      start: [ this.intRangeeeee[0]],
      behaviour: 'tap',
      snap: true,
      range: this.rangers
    }

【讨论】：