Bootstrap Curseur de la valeur de changement de gestionnaire
J'utilise Bootstrap Slider, et je me demandais s'il y avait un moyen d'inclure un gestionnaire pour un changement de valeur. Je vois que la documentation inclut des handlers pour slideStart, slide et slideStop, mais aucun Pour "change" (de valeur).
il est possible qu'ils puissent faire glisser le curseur autour et (au moment de la libération) finir sur la même valeur, auquel cas je ne voudrais pas que l'événement se déclenche. Seulement s'ils la glissent à une nouvelle valeur.
j'ai essayé:
$('#sliderAdminType').slider({
formater: function(value) {
// my formater stuff that works
},
change: function(event, ui) {
console.log("has changed");
}
});
et
$('#sliderAdminType').change(function() {
console.log("has changed");
});
et
$('#sliderAdminType').slider().change(function() {
console.log("has changed");
});
et
$('body').on('change', '#sliderAdminType', function(e){
console.log("has changed");
});
4 réponses
Vous pouvez effectuer les étapes suivantes:
1) utiliser slideStart événement pour obtenir la valeur d'origine de votre curseur
2) Utiliser slideStop événement pour obtenir la nouvelle valeur de votre curseur
3) comparez ces deux valeurs, si elles sont différentes, puis lancez votre code
var originalVal;
$('.span2').slider().on('slideStart', function(ev){
originalVal = $('.span2').data('slider').getValue();
});
$('.span2').slider().on('slideStop', function(ev){
var newVal = $('.span2').data('slider').getValue();
if(originalVal != newVal) {
alert('Value Changed!');
}
});
la réponse acceptée n'est pas valide pour portée: true curseur
Voici double-vérification du curseur:https://jsfiddle.net/oayj5Lhb/
Pour double curseur: événement "change" renvoie à la fois newValue et oldValue objets. Gardez à l'esprit que le "changement", de "slideStart', 'slideStop' événements sont déclenchés sur le mouvement de la souris (quand j'ai demandé pourquoi, la réponse a été "c'est la bonne façon de mise en œuvre", pour moi, il semble un peu étrange). Voici un exemple:
$('#your-slider').slider().on('change', function(event) {
var a = event.value.newValue;
var b = event.value.oldValue;
var changed = !($.inArray(a[0], b) !== -1 &&
$.inArray(a[1], b) !== -1 &&
$.inArray(b[0], a) !== -1 &&
$.inArray(b[1], a) !== -1 &&
a.length === b.length);
if(changed ) {
//your logic should be here
}
});
remarque: [2, 1] et [1, 2] sont considérés comme égaux parce que la paire de glissières peut être interchangeable.
essayez ceci si la fonction n'a pas fonctionné pour vous, comme moi
$('#yourSlider').bind("slideStop", function (e)
au lieu de changer l'événement il suffit d'utiliser la diapositive. Le promoteur ne fonctionne pas bien, donc dans la Diapositive, vous pouvez définir la valeur à nouveau.
var thresholdSlider = $('#Threshold');
thresholdSlider.slider({
formater: function (value) {
return 'Current value: ' + value;
}
});
thresholdSlider.slider().on('slide', function (ev) {
thresholdSlider.slider('setValue', ev.value);
});