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
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
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
});
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
}
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.