Comment actualiser un curseur D'interface utilisateur jQuery après avoir défini des valeurs min ou max?
J'ai une interface utilisateur.curseur et changer ses valeurs min et max lors de l'exécution. Mais ces changements ne se reflètent que dans la vue, quand je définis les valeurs par la suite (ce qui provoque le déclenchement d'événements qui ne sont pas nécessaires). À mon avis, il devrait rafraîchir la vue après avoir défini min et max aussi. Y at-il une solution de contournement simple, semble qu'une méthode d'actualisation est manquante 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
Edit Ce problème a été corrigé dans l'INTERFACE utilisateur de jQuery 1.9
8 réponses
Je ne sais pas s'il s'agit d'un bug dans le curseur de L'interface utilisateur jQuery, mais de toute façon, ce que vous pouvez faire est de changer la valeur actuelle (techniquement, en définissant la valeur actuelle à la valeur actuelle...) pour forcer l'affichage d'être actualisée. Après la documentation , cela signifierait faire 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
});
Fissuré le problème de repositionnement de la poignée... suffit d'appeler 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.");
}
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 bien.
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
Essayez ceci.
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+'%');
Cela pourrait être un problème de version mais rien que j'ai essayé avec les options "min / max" n'a fonctionné. C'est OK 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());
});
Vous pouvez mettre à jour le HTML div dans la fonction jquery comme
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 slider
Veuillez essayer ceci:
$("#Slider2").slider("value", 10, 1000); //10 = min and 1000 = max
Vous devez conserver une référence à votre objet slider,
var slider = $("#something").slider({
range: true,
values: [25, 75],
min: 0,
max: 100
});
slider.slider("option", "min", 25);