nouislider with custom values instead of range

Question

I like noUIslider slider but I need to apply custom values instead of range and step options, as my values are not changing fluently.

So instead having for example: range [10,90] step: 5

I would like to use:

values [0,10, 15.5, 18, 41, etc...]

Is it possible?

Thanks

Answer 1

The Solution is the range option. You'll have to make an object with the values for the postion on the slider, the value at that postion and the distance to the next value.

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

Answer 2

You can set custom non-linear values.

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

See example here http://refreshless.com/nouislider/examples/non-linear

Answer 3

I used TypeScript to solve this problem You may not need the word this and Define your numeric array in a different way.

Range for two handle:

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

and for only one handle

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
    }