jQuery UI-Schieberegler feste Werte

Question

Ich versuche, den jQuery-Schieberegler Werte zum Verschieben zu haben, im Gegensatz zu jeder Zahl zwischen den minimalen Werten &.

Ich will "0, 25, 50, 100, 250, 500" als die einzigen Mengen Menschen können auch schieben, aber kann nicht herausfinden, wie es gemacht wird. Sie in den Teil "Werte" zu setzen scheint nichts zu tun.

<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

Der Werteinitialisierer dient zum Bereitstellen der Startpositionen von Mehrfachdaumereglern.

Ich würde ein Array der möglichen Werte bereitstellen, den Schieberegler ändern, um den Bereich dieses Arrays abzubilden, und dann das Präsentationsbit so ändern, dass es vom entsprechenden Array-Element gelesen wird.

Bereichsschieberegler: Mehr Daumen Version

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

Bereichsschieberegler: single-Daumen-Version

---

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

;

Mindest html:

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