Bootstrap slider with 3 or more handles?

Question

Quick question. Is it possible to use bootstrap slider to select more than 3 ranges (basically have 3 or more handles on it, instead of the default 2)?

We have a change in requirement, where we were earlier using 5 different sliders, but now we want to try and see if we can somehow merge them into one slider itself.

I wish I could post a pic, but I don't have enough repo :P

|----O----O--------O-----O-------|

Any help would be awesome.

Answer 1

Unfortunatelly bootstrap-slider.js can "handle" only two handles. But noUiSlider can have more of them and is highly customizable.

It can't tell you the ranges rightaway, but you can get them easily from counting with handles, min and max like this:

//get array of connect elements (ranges)
var connect = multirange.querySelectorAll('.noUi-connect');

multirange.noUiSlider.on('update', function () {
 var valuesarr = multirange.noUiSlider.get(),
 max = multirange.noUiSlider.options.range.max[0],
 oldsum = multirange.noUiSlider.options.range.min[0];// = slider min, will be usually 0

 for ( var i = 0; i < connect.length; i++ ) {
     if(valuesarr[i]) $(connect[i]).text(valuesarr[i] - oldsum);
     else $(connect[i]).text(max - oldsum);
     oldsum=valuesarr[i];
 }
});

see fiddle!