Ручки noUiSlider отображаются в неправильных местах - PullRequest
Новая
       21

Ручки noUiSlider отображаются в неправильных местах

1 голос
/ 13 мая 2019

Я пытаюсь настроить noUiSlider (версия 13.1.5) из пользовательского элемента Polymer 3.Ползунок отображает и технически работает, но правая ручка показывает, где должна быть левая ручка, а левая ручка - вне контейнера, предназначенного для слайдера.Я взял код из элемента Polymer 1, который работает на 100% правильно, но маркеры не работают в элементе Polymer 3.

HTML-код выглядит следующим образом и не изменился между двумя версиями Polymer (кроме кода, который теперь находится в функции template для Polymer 3): 

<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 добавляет преобразования в дескрипторы, которые их отталкиваютгде они должны быть, но я не уверен, что я должен сделать, чтобы это исправить.

...