无法拖动滑块手柄答案

【问题标题】：Can not drag slider handles无法拖动滑块手柄
【发布时间】：2018-12-19 08:46:46
【问题描述】：

我以编程方式创建了一个时间范围滑块 (noUiSlider)。

它工作正常，除了我无法拖动滑块手柄（这是默认行为），以更改滑块值。

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);

我一直无法弄清楚，为什么拖动交互不起作用（而其他一切，如“点击”工作正常）。非常感谢您对此提供任何帮助。

【问题讨论】：

A. console 中的任何错误？ B. 你能创建一个重现这个问题的 sn-p 以便我们调试它吗？
你用的是什么版本？早期版本在 iframe 中存在问题。
@Lg102 我正在使用 noUiSlider 10.0.0
我没有任何东西可以测试这个，但是你的 sn-p 只是在初始化之后将滑块附加到 DOM 上。你可以试着移动它吗？
嗨@MoshFeu，控制台中没有错误。我正在尝试在新页面中创建滑块控件（具有非常基本的布局）。问题在那里无法重现。将尝试使用户界面与我的应用程序的用户界面相似，以便重现该问题。一旦我能够隔离它，就会通知你。

标签： javascript jquery nouislider

【解决方案1】：

我认为正在发生的事情是您创建了滑块，然后当您附加它时，它会丢失其（默认？）侦听器。为避免这种情况，请附加您的 div 然后初始化 noUiSlider 元素。

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

如果这仍然不起作用，请尝试重新选择新附加的 sliderDiv 元素并将其传递给 noUiSlider.create() 方法。

【讨论】：