Как обновить jQuery UI Slider после установки минимальных или максимальных значений?

У меня есть ui.slider и изменяю его минимальные и максимальные значения во время выполнения. Но эти изменения отражаются только в представлении, когда я тоже устанавливаю значения (что заставляет его запускать события, которые не нужны). На мой взгляд, он должен обновить представление после установки min и max. Есть ли простой способ обхода проблемы, кажется, что для слайдера отсутствует метод обновления.

$("#something").slider({
    range: true,
    values: [25, 75],
    min: 0,
    max: 100
});
$("#something").slider("option", "min", 25); // left handle should be at the left end, but it doesn't move
$("#something").slider("option", "values", [25, 75]); // the left handle is now at the left end, but doing this triggers events

Изменить Эта проблема исправлена ​​в jQuery UI 1.9

Ответы

Ответ 1

Я не знаю, является ли это ошибкой в ​​слайдере jQuery UI, но в любом случае вы можете изменить текущее значение (технически, установив текущее значение в текущее значение...), чтобы заставить просмотр для обновления. Следуя документации, это означало бы сделать что-то вроде этого:

$(function() { 
    var $slide = $("#something").slider({
        range: true,
        values: [25, 75],
        min: 0,
        max: 100
    });
    $slide.slider("option", "min", 25); // left handle should be at the left end, but it doesn't move
    $slide.slider("value", $slide.slider("value")); //force the view refresh, re-setting the current value
});

Ответ 2

Трещина проблемы с репозицией ручки... просто вызовите эту функцию.

function resetSlider(){
    $("#slider-fill").attr('value',maxPrice);
    $("input[type='range']").slider( "refresh" );//refresh slider to max value
    $(".ui-slider-handle").css("left","100%");
    console.log("Slider Reset Done.");
}

Ответ 3

Установка минимального значения ползунка:

$slide.slider("option", "min", 25); не работает для меня.

Вместо этого я использовал: $slide.slider("values", "0", 25); и все работает нормально.

Для установки максимального значения ползунка используйте $slide.slider("values", "1", 75);

Дополнительную информацию о настройке значений см. в api docs - http://api.jqueryui.com/slider/#option-values

Ответ 4

Попробуйте это.

valPercent = (current_slide_value - min_value) / (max_value - min_value) * 100;     
parentElem.find('.ui-slider-range').css('width', valPercent+'%');    
parentElem.find('.ui-slider-handle').css('left', valPercent+'%');

Ответ 5

Это может быть проблема с версией, но я ничего не пробовал с настройками "min/max". Это нормально и протестировано с помощью JQuery UI 1.10. Таким образом, вы можете использовать ползунок или цифры для изменения другого:

$("#mySlider").slider({range: true, min: 0, max: 100, values: [ 0, 100 ], step: 10,
   slide: function( event, ui ) {
      $("#mySliderMin").val( ui.values[ 0 ]);
      $("#mySliderMax").val( ui.values[ 1 ]);
   }
});
$("#mySliderMin").val($("#mySlider").slider( "values", 0 ));
$("#mySliderMax").val($("#mySlider").slider( "values", 1 ));
$("#mySliderMin, #mySliderMax").change(function () {
   $("#mySlider").slider("values", 0, $("#mySliderMin").val());
   $("#mySlider").slider("values", 1, $("#mySliderMax").val());
});

Ответ 6

Вы можете обновить html div в функции jquery как

var d='<div class="row grid_slider"><div><p>Grid With time in 24 hour format</p><input type="text" class="range_time24" value="" name="range" /></div></div>';document.getElementById("slider").innerHTML=d;

Затем установите новые значения для слайдера

Ответ 7

Пожалуйста, попробуйте следующее:

$("#Slider2").slider("value", 10, 1000); //10 = min and 1000 = max

Ответ 8

Вам нужно сохранить ссылку на свой объект слайдера,

var slider = $("#something").slider({
               range: true,
               values: [25, 75],
               min: 0,
               max: 100
             });
slider.slider("option", "min", 25);

Все это указано в Документация