Como atualizar um jQuery UI Slider depois de definir os valores mínimo ou máximo?

Question

Eu tenho um ui.slider e altero seus valores mínimo e máximo em tempo de execução.Mas essas alterações só são refletidas na visualização, quando eu também defino os valores posteriormente (o que faz com que ele dispare eventos que não são necessários).Na minha opinião, ele deve atualizar a visualização após definir o mínimo e o máximo também.Existe uma solução alternativa simples, parece que um método de atualização está faltando para o controle deslizante.

$("#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

Editar Este problema foi corrigido no jQuery UI 1.9

Answer 1

Não sei se isso é um bug no controle deslizante da IU do jQuery, mas de qualquer maneira, o que você pode fazer é alterar o valor atual (tecnicamente, definir o valor atual para o valor atual ...) para forçar a visualizaçãopara ser atualizado.Seguindo a documentação , isso significaria fazer algo assim:

$(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
});  

Answer 2

Resolvido o problema de reposicionamento do identificador ... basta chamar esta função ..

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.");
}

Answer 3

Definir o valor mínimo do controle deslizante como:

$slide.slider("option", "min", 25); não funciona para mim.

Em vez disso, usei: $slide.slider("values", "0", 25); e tudo está funcionando bem.

Para definir o valor máximo do controle deslizante, use $slide.slider("values", "1", 75);

Para obter mais informações sobre como definir valores, consulte os documentos da api - http://api.jqueryui.com / slider / # options-values

Answer 4

Experimente isso.

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+'%');

Answer 5

Pode ser um problema de versão, mas nada do que tentei com as opções "min / max" funcionou.Isso está OK e foi testado com JQuery UI 1.10.Desta forma, você pode usar o controle deslizante ou os números para alterar o outro:

$("#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());
});

Answer 6

Você pode atualizar o div html na função jquery como

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;

Em seguida, defina novos valores para o controle deslizante

Answer 7

Por favor, tente isto:

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

Answer 8

Você precisa manter uma referência ao seu objeto deslizante,

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

Tudo isso está listado na Documentação