https://github.com/leongersen/noUiSlider/issues/892<br>

Add handles programmatically #892  



 <link href="https://refreshless.com/nouislider/dist/nouislider.css?v=1570" rel="stylesheet">
    <script src="https://refreshless.com/nouislider/dist/nouislider.js?v=1570"></script>

<style>
.slider { margin: 80px; }
  </style>



<div id = "sliderid" class="slider" data-step="5"></div>

<button id="update-1">
	add handle
</button>

 
   
   
   
   
   
   
   
   
   
    <script>
var ii=0;

function data ( element, key ) {
	return element.getAttribute('data-' + key);   
}

function createSlider ( slider ) {
    
        noUiSlider.create(slider, options);
        mergeTooltips(slider,4, '-');
}
var button1 = document.getElementById('update-1');
var sliderUp = document.getElementById('sliderid');

var options = {
            start: [0, 40,50,60],
            
            step: 1,
            range: {
                'min': 0,
                'max': 1440
            },
            tooltips: true,
            connect: true,
            format: {
                to: function (value) {
                    return value + '';
                },
                from: function (value) {
                    return value.replace('', '');
                }
            }
        };
 
 // start: [mon_1, mon_2, mon_3, mon_4, mon_5, mon_6],
 // connect: [false, true, false, true, false, true, false],
  //step: 1,
  //behaviour: "none",
 // tooltips: [true, true, true, true, true, true],

function updateSliderRange ( ) {
 ii=ii+50;
	//sliderUp.noUiSlider.destroy();
  //options.start = [20,30,40,50];
  var values = sliderUp.noUiSlider.get(true);
  var newhandle = 50+ii;
values.push(Math.round(newhandle),Math.round(newhandle+25)); // Your new handle start value
values.sort();

sliderUp.noUiSlider.destroy();

options.start = values;
noUiSlider.create(sliderUp, options);

  //noUiSlider.create(sliderUp, options);
  //sliderUp.noUiSlider.add([20,30,40]);
}
	
button1.addEventListener('click', function(){
	updateSliderRange();
});


Array.prototype.forEach.call(document.querySelectorAll('.slider'), createSlider);
/**
 * @param slider HtmlElement with an initialized slider
 * @param threshold Minimum proximity (in percentages) to merge tooltips
 * @param separator String joining tooltips
 */
function mergeTooltips(slider, threshold, separator) {

    var textIsRtl = getComputedStyle(slider).direction === 'rtl';
    var isRtl = slider.noUiSlider.options.direction === 'rtl';
    var isVertical = slider.noUiSlider.options.orientation === 'vertical';
    var tooltips = slider.noUiSlider.getTooltips();
    var origins = slider.noUiSlider.getOrigins();

    // Move tooltips into the origin element. The default stylesheet handles this.
    tooltips.forEach(function (tooltip, index) {
        if (tooltip) {
            origins[index].appendChild(tooltip);
        }
    });

    slider.noUiSlider.on('update', function (values, handle, unencoded, tap, positions) {

        var pools = [[]];
        var poolPositions = [[]];
        var poolValues = [[]];
        var atPool = 0;

        // Assign the first tooltip to the first pool, if the tooltip is configured
        if (tooltips[0]) {
            pools[0][0] = 0;
            poolPositions[0][0] = positions[0];
            poolValues[0][0] = values[0];
        }

        for (var i = 1; i < positions.length; i++) {
            if (!tooltips[i] || (positions[i] - positions[i - 1]) > threshold) {
                atPool++;
                pools[atPool] = [];
                poolValues[atPool] = [];
                poolPositions[atPool] = [];
            }

            if (tooltips[i]) {
                pools[atPool].push(i);
                poolValues[atPool].push(values[i]);
                poolPositions[atPool].push(positions[i]);
            }
        }

        pools.forEach(function (pool, poolIndex) {
            var handlesInPool = pool.length;

            for (var j = 0; j < handlesInPool; j++) {
              
                var handleNumber = pool[j];

                if (j === handlesInPool - 1) {
                    var offset = 0;

                    poolPositions[poolIndex].forEach(function (value) {
                        offset += 1000 - value;
                    });

                    var direction = isVertical ? 'bottom' : 'right';
                    var last = isRtl ? 0 : handlesInPool - 1;
                    var lastOffset = 1000 - poolPositions[poolIndex][last];
                    offset = (textIsRtl && !isVertical ? 100 : 0) + (offset / handlesInPool) - lastOffset;

                    // Center this tooltip over the affected handles
                    if (j==2){separator="|";}else{separator="-";}
                    tooltips[handleNumber].innerHTML = poolValues[poolIndex].join(separator);
                    tooltips[handleNumber].style.display = 'block';
                    tooltips[handleNumber].style[direction] = offset + '%';
                } else {
                    // Hide this tooltip
                    tooltips[handleNumber].style.display = 'none';
                }
            }
        });
    });
} // end merge tooltips if close to each other

      </script>

/* Add your styles here */

// Add your code here