NoUIslider-обновить диапазон по требованию

У меня есть два ползунка, и я хотел бы обновить диапазон одного ползунка на основе движения другого.

например; slider_1 и slider_2 имеют диапазон 1-10. Когда я перемещаю slider_1 из позиции 1 в 2, Диапазон slider_2 изменяется от 1-10 до 1-20. Если я перемещаю slider_1 из позиции 2 в 3, slider_3 теперь имеет диапазон от 1-30 и так далее.

Я инициализирую ползунок следующим образом:

  function slider() {
        $(".slider").noUiSlider({
            orientation: "horizontal",
            start: [0],
            range: {
                min: 0,
                max: 10,
            },
            connect: 'lower',
            direction: "ltr",
            step: 1,
        });
    };

лучший способ, которым я могу придумать реализацию это до сих пор деконструировать весь слайдер, и повторно инициализировать его с новым диапазоном каждый раз. Однако я не уверен, как правильно разобрать слайдер.

есть идеи о том, как это сделать?

8
javascript jquery nouislider uislider

3 ответов

noUiSlider предлагает updateOptions метод, который сохранит все настройки, за исключением новых, которые вы передадите. The документация по обновлению здесь.

начиная с noUiSlider 8, вы можете сделать:

slider.noUiSlider.updateOptions({
    range: {
        'min': 20,
        'max': 30
    }
});

раскрытие информации: я автор плагина.

20

можно использовать updateOptions функции путем передачи объекта в качестве аргумента. Yo может создать свой собственный" объект конфигурации " программно следующим образом:

config = {
        orientation: "horizontal",
        start: [100,200],
        range: {
            min: 0,
            max: 200,
        },
        connect: 'lower',
        direction: "ltr",
        step: 10,
    };

а затем обновите ползунок в любом месте вашего Javascript:

 $(".slider").updateOptions(config);
1

нужно позвонить destroy() а то create() для динамического изменения диапазона. Невозможно изменить диапазон после отображения элемента управления. 

slider.noUiSlider.destroy()
slider.noUiSlider.create({
    range: {
        'min': 20,
        'max': 30
    }
});
1