Can not drag slider handles

Question

I've created a time range slider (noUiSlider) programmatically.

It's working fine except that, I'm NOT able to drag the slider handles (that is available as a default behaviour), in order to change the slider value(s).

var noUiSlider = require('./js/nouislider');

var sliderDiv = document.createElement("div");
sliderDiv.id = "slider-"+soundElement.description;
var sliderElem: any = noUiSlider.create(sliderDiv, {
    start: [0, 50],
    tooltips: [true, true],
    behaviour: "tap-drag",
    connect: true,
    orientation: 'vertical',
    range: {
        min: 0,
        max: 100
    }
});
soundElementIframe.appendChild(sliderDiv);

I've not been able to figure out, why drag interaction is not working (while everything else like 'tap' is working fine). I'd really appreciate any help around this.

Answer 1

What I think is happening is that you create your slider, then when you append it, it loses its (default?) listeners. To avoid this, append your div then initialize the noUiSlider element.

const sliderDiv = document.createElement('div');
soundElementIframe.appendChild(sliderDiv);
noUiSlider.create(sliderDiv, options);

If this still doesn't work, try reselecting the new appended sliderDiv element and passing that into the noUiSlider.create() method.