Valeurs fixes du curseur de l'interface utilisateur jQuery

Question

J'essaie de faire en sorte que le curseur jQuery ait des valeurs de glissement, contrairement à tous les nombres entre les valeurs maximales &. Je veux "0, 25, 50, 100, 250, 500" comme les seules quantités que les gens peuvent glisser aussi mais ne peuvent pas comprendre comment c'est fait. Les mettre dans la partie "Valeurs" ne semble pas faire quoi que ce soit.

<script type="text/javascript"> 
$(function() { 
    $("#slider-range").slider({ 
     range: true, 
     min: 0, 
     max: 500, 
     values: [100, 250], 
     slide: function(event, ui) { 
      $("#amount").val('Miles: ' + ui.values[0] + ' - ' + ui.values[1]); 
     } 
    }); 
    $("#amount").val('Miles: ' + $("#slider-range").slider("values", 0) + ' - ' + $("#slider-range").slider("values", 1)); 
}); 
</script> 

Answer 1

L'initialiseur de valeurs sert à fournir les positions de départ des curseurs à plusieurs curseurs.

Je fournirais un tableau des valeurs possibles, changer le curseur pour mapper sur la plage de ce tableau, puis changer votre bit de présentation à lire à partir de l'élément de tableau approprié.

plage curseur: la version multi-pouce

$(function() { 
    var valMap = [0, 25, 50, 100, 250, 500]; 
    $("#slider-range").slider({ 
     min: 0, 
     max: valMap.length - 1, 
     values: [0, 1], 
     slide: function(event, ui) {       
      $("#amount").val('Miles: ' + valMap[ui.values[0]] + ' - ' + valMap[ui.values[1]]);     
     }  
    }); 
    $("#amount").val('Miles: ' + valMap[$("#slider-range").slider("values", 0)] + ' - ' + valMap[$("#slider-range").slider("values", 1)]); 
}); 

curseur de plage: version mono-pouce

---

$(function() { 
    var valMap = [0, 40, 50, 63, 90, 110, 125, 140, 160, 225, 250]; 
    $("#slider-range").slider({ 
     min: 1, 
     max: valMap.length - 1, 
     value: 0, 
     slide: function(event, ui) {       
      $("#amount").val(valMap[ui.value]);     
     }  
    }); 
    //$("#amount").val(valMap[ui.value]); 
}) 

;

html minimum:

<input type="text" id="amount" value="40" /> 
<div id="slider-range"></div>