jQuery UI Slider (настройка программно)

Question

jQuery UI Slider (настройка программно)

Я хотел бы изменить ползунки на лету. Я попытался сделать это с помощью

$("#slider").slider("option", "values", [50,80]);

этот вызов установит значения, но элемент не будет обновлять позиции ползунка.
Звоню

$("#slider").trigger('change');

не помогло.

есть ли другой/лучший способ изменить значение и положение ползунка?

746 9

jQuery jquery-ui

9 ответов:

Comments

Ничего не найдено.

alexteg · Accepted Answer · 2011-03-22 17:11:39

Это зависит от того, хотите ли вы изменить ползунки в текущем диапазоне или изменить диапазон ползунков.

Если это значения в текущем диапазоне, который вы хотите изменить, затем .метод slider () - это тот, который вы должны использовать, но синтаксис немного отличается от используемого:
$("#slider").slider('value',50);
или если у вас есть ползунок с двумя ручками, это будет:
$("#slider").slider('values',0,50); // sets first handle (index 0) to 50
$("#slider").slider('values',1,80); // sets second handle (index 1) to 80
Если это диапазон, который вы хотите изменить, это будет:
$("#slider").slider('option',{min: 0, max: 500});

sakhunzai · Accepted Answer · 2017-12-19 13:48:48

для меня это прекрасно запускает событие слайда на слайдере UI:
hs=$('#height_slider').slider();
hs.slider('option', 'value',h);
hs.slider('option','slide')
       .call(hs,null,{ handle: $('.ui-slider-handle', hs), value: h });
не забудьте установить значение hs.slider('option', 'value',h); перед триггером. Иначе обработчик слайдера не будет синхронизирован со значением.

здесь следует отметить, что h это индекс / позиция (не значение) в случае, если вы используете html select.

Mal · Accepted Answer · 2012-07-08 02:59:25

ни один из приведенных выше ответов не работал для меня, возможно, они были основаны на более старой версии фреймворка?

все, что мне нужно было сделать, это установить значение базового элемента управления, а затем вызвать метод обновления, как показано ниже:
$("#slider").val(50);
$("#slider").slider("refresh");

bentwonk · Accepted Answer · 2012-07-09 13:56:31

ответ Mal был единственным, который работал для меня (возможно, jqueryUI изменился), вот вариант для работы с диапазоном:
$( "#slider-range" ).slider('values',0,lowerValue);
$( "#slider-range" ).slider('values',1,upperValue);
$( "#slider-range" ).slider("refresh");

anonymous · Accepted Answer · 2010-09-07 11:23:49

можно вручную запускать такие события:

применить поведение ползунка к элементу
var s = $('#slider').slider();
...

установите значение ползунка
s.slider('value',10);
запуск события слайд, передавая объект пользовательского интерфейса
s.trigger('slide',{ ui: $('.ui-slider-handle', s), value: 10 });

globalSchmidt · Accepted Answer · 2016-08-06 01:47:05

одна часть решение @Гаурав работал для jQuery 2.1.3 и пользовательского интерфейса jQuery 1.10.2 с несколькими ползунками. Мой проект использует четыре ползунка диапазона для фильтрации данных с помощью этот фильтр.плагин JS. Другие решения сбрасывали ручки слайдера обратно в их начальные конечные точки просто отлично, но, по-видимому, они не запускали событие, которое фильтрует.Джей-Эс понял. Итак, вот как я зациклился на ползунках:
$("yourSliderSelection").each (function () {
    var hs = $(this); 
    var options = $(this).slider('option');

    //reset the ui
    $(this).slider( 'values', [ options.min, options.max ] ); 

    //refresh/trigger event so that filter.js can reset handling the data
    hs.slider('option', 'slide').call(
        hs, 
        null, 
        {
            handle: $('.ui-slider-handle', hs),
            values: [options.min, options.max]
        }
    );

});
The hs.slider() код сбрасывает данные, но не пользовательский интерфейс в мой сценарий. Надеюсь, это поможет другим.

Ashish Agarwal · Accepted Answer · 2012-09-02 21:41:26

Я хотел обновить слайдер, а также inputbox. Для меня следующее работает

a.slider('value',1520);
$("#labelAID").val(1520);

здесь a объект следующим образом.

 var a= $( "<div id='slider' style='width:200px;margin-left:20px;'></div>" ).insertAfter( "#labelAID" ).slider({
            min: 0,
            max: 2000,
            range: "min",
            value: 111,
            slide: function( event, ui ) {

                $("#labelAID").val(ui.value    );
            }
        });

        $( "#labelAID" ).keyup(function() {
            a.slider( "value",$( "#labelAID" ).val()  );
        });

Human · Accepted Answer · 2016-07-03 16:28:30

Если вам нужно изменить значения слайдера из нескольких входных данных, используйте его:

html:

<input type="text" id="amount">
<input type="text" id="amount2">
<div id="slider-range"></div>

js:

    $( "#slider-range" ).slider({
    range: true,
    min: 0,
    max: 217,
    values: [ 0, 217 ],
    slide: function( event, ui ) {
        $( "#amount" ).val( ui.values[ 0 ] );
        $( "#amount2" ).val( ui.values[ 1 ] );
    }
    });

$("#amount").change(function() {
    $("#slider-range").slider('values',0,$(this).val());
});
$("#amount2").change(function() {
    $("#slider-range").slider('values',1,$(this).val());
});

https://jsfiddle.net/brhuman/uvx6pdc1/1/

nvvetal · Accepted Answer · 2013-09-02 19:33:14

вот рабочая версия:

var newVal = 10;
var slider = $('#slider');        
var s = $(slider);
$(slider).val(newVal);
$(slider).slider('refresh');