noUiSlider 手柄显示在不正确的位置

Question

我正在尝试从 Polymer 3 自定义元素中设置 noUiSlider（版本 13.1.5）。滑块显示并在技术上有效，但右手柄显示左手柄应该在哪里，左手柄显示在为滑块设置的容器之外。 我从一个 100% 正确工作的 Polymer 1 元素中获取代码，但句柄在 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);

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

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

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

noUiSlider 代码似乎正在将转换添加到手柄上，将它们推离应在的位置，但我不确定我应该做些什么来解决这个问题。

Answer 1

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