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

Question

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

所以代之以： 范围[10,90] 步骤：5

我想用：

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

有可能吗？

由于

Answer 1

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

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

请参阅此处示例http://refreshless.com/nouislider/examples/non-linear

Answer 2

解决方案是范围选项。你必须创建一个对象，其中包含滑块上postion的值，该位​​置的值以及到下一个值的距离。

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