Событие обновления noUiSlider в Angular не обновляет вид на слайде, но только когда слайдер выпущен - PullRequest
Новая
       49

Событие обновления noUiSlider в Angular не обновляет вид на слайде, но только когда слайдер выпущен

0 голосов
/ 16 мая 2019

Я пытаюсь использовать событие обновления noUiSlider для обновления элемента span, чтобы показать значения, устанавливаемые при перемещении маркера.

У меня есть событие slider.on('end', this.sliderEnd);, вызываемое при отпускании ручек ползунка. Это когда поиск выполняется по заданным значениям.

У меня есть slider.on('update', this.sliderUpdate);, который в console.log показывает значения, обновляющиеся при скольжении, но это не показывает значения, изменяющиеся в представлении?

Если я удаляю событие slider.on('end', this.sliderEnd);, то диапазон, в котором отображаются значения, все равно не обновляется.

Может кто-нибудь помочь в этом вопросе? Ниже я показал свой код, где проблема.

component.html

<div #priceSlider id="price"></div>
<div class="u-flex one-whole">
    <span class="c-label one-whole u-mr-small">
        <span data-slider--label="price" data-slider--handle="0">{{selectedMinPrice}}</span>
    </span>
    <span class="c-label one-whole u-right">
        <span data-slider--label="price" data-slider--handle="1">{{selectedMaxPrice}}</span>
    </span>
</div>

component.ts

selectedMinPrice = "Any Price";
selectedMaxPrice = "Any Price";

updateSlideLimits() {
    slider.on('end', this.sliderEnd);
    slider.on('update', this.sliderUpdate);
}

private sliderUpdate = (values: any[], handle) => {

    this.selectedMinPrice = values[0];
    this.selectedMaxPrice = values[1];

    console.log("selectedMinPrice", this.selectedMinPrice);
}

Ниже приведено изображение результата conosle.log, где значения были напечатаны, когда я скользил, но в представлении под ползунком он ТОЛЬКО обновил диапазон после освобождения дескриптора.

enter image description here

Как я могу обновить диапазон во время скольжения?

** Обновление

component.ts

Изменение обновления на функцию вообще не обновляет представление .. где, как я сделал это в моем исходном вопросе, оно обновляет представление, но только после освобождения дескриптора?

В обоих примерах console.log обновляется, когда я сдвигаю ручку. 

    updateSlideLimits() {
        slider.on('end', this.sliderEnd);

        slider.on('update', function (this, values, handle) {

            this.selectedMinPrice = values[0];
            this.selectedMaxPrice = values[1];

            console.log("Minprice", this.selectedMinPrice);
            console.log("Maxprice", this.selectedMaxPrice);
        });
}
...