Create multiple range slide handles in one slider

Question

I am trying to add multiple handles to a jQuery UI slider widget, as in 2 or 3 or more range sliders in one slider.

I have tried searching on google and found an art

Answer 1

If you don't insist on jQuery UI, also noUiSlider has this capability 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!