Question

我正在尝试从Polymer 3自定义元素中设置noUiSlider（版本13.1.5）。滑块将显示并在技术上起作用，但右手柄将显示左手柄应位于的位置，而左手柄则显示在为滑块设置的容器之外。我从Polymer 1元素中获取了代码，该元素可以100％正确地工作，但是手柄在Polymer 3元素中不起作用。

html代码如下，并且在两个Polymer版本之间没有更改（除了现在在Polymer 3的template函数中的代码）：

<div style="height: 50%; width: 100%">
    <div id="scoreRangeSelector" style="display: flex; flex-direciton: column">
        <div id="scoreRangeSelectorText">
            <p>Range Selection</p>
        </div>
        <div id="scoreRangeSelectorSlider"></div>
        <div id="scoreRangeInterval">
            <p>Score Interval</p>
            <input id="scoreRangeIntervalInput" on-change="_scoreRangeIntervalChanged" type="number" value="5" />
        </div>
    </div>
</div>

设置滑块的Polymer代码如下，并且在两个Polymer版本之间没有更改（除了将元素检索到变量slider中）：

var slider = this.$.scoreRangeSelectorSlider;
noUiSlider.create(slider,
{
    connect: true,
    range:
    {
        'min': 0,
        'max': 100
    },
    start: [0, 100],
    step: 1,
    tooltips: [true, true]
});
slider.noUiSlider.on("end", this._sliderMoved);

在“聚合物1”元素中，滑块及其手柄正确显示，如下所示： https://www.pastiebin.com/5cd95545273b1

在Polymer3元素中，显示滑块，但右手柄显示左手柄应在的位置，左手柄显示在容器外部，并显示在另一个容器下方： https://www.pastiebin.com/5cd9563ac618f

在图像中可以看到的手柄是应该位于滑块右侧的手柄。显示为“ div.noUi-origin”的元素是左手柄，应位于滑块的左侧。

noUiSlider代码似乎在将句柄添加了转换，从而将其推到了应有的位置，但是我不确定应该如何解决。

Answer 1

将“direction: ltr”设置为“scoreRangeSelectorSlider”父

noUiSlider句柄显示不正确的位置

1 个答案: