web-dev-qa-db-fra.com

Comment actualiser un curseur jQuery UI Slider après avoir défini les valeurs min ou max?

J'ai un slider et change ses valeurs min et max à l'exécution. Mais ces modifications ne sont reflétées que dans la vue, lorsque je définis ensuite les valeurs (ce qui provoque le déclenchement d'événements inutiles). À mon avis, il convient également d'actualiser la vue après le réglage de min et max. Existe-t-il une solution de contournement simple, semble-t-il qu'une méthode d'actualisation manque pour le curseur.

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

Éditer Ce problème a été résolu dans jQuery UI 1.9.

jqueryjquery-uislidermaxmin
25
Manuel Leuenberger

Je ne sais pas s'il s'agit d'un bogue dans le curseur de l'interface utilisateur jQuery, mais vous pouvez quand même modifier la valeur actuelle (techniquement, définir la valeur actuelle sur la valeur actuelle ...) pour forcer le rafraîchissement de la vue. . Après la documentation , cela voudrait dire quelque chose comme ceci: 

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

Corrigé le problème de repositionnement de la poignée ... appelez simplement cette fonction.

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

Définir la valeur minimale du curseur comme:

$slide.slider("option", "min", 25); ne fonctionne pas pour moi.

Au lieu de cela, j'ai utilisé: $slide.slider("values", "0", 25); et tout fonctionne correctement.

Pour définir la valeur maximale du curseur, utilisez $slide.slider("values", "1", 75);

Pour plus d'informations sur la définition des valeurs, consultez les documents api - http://api.jqueryui.com/slider/#option-values ​​

1
Pinte Dani

Essaye ça.

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

Vous pouvez mettre à jour la div HTML en fonction 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;

Puis définissez les nouvelles valeurs sur le curseur

0
Junaid Malik

S'il vous plaît essayez ceci:

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

Il pourrait s'agir d'un problème de version mais rien de ce que j'ai essayé avec les options "min/max" n'a fonctionné. Ceci est correct et testé avec JQuery UI 1.10. De cette façon, vous pouvez utiliser le curseur ou les chiffres pour changer l’autre:

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