jQuery UI kaydırıcı değerleri

Question

jQuery kaydırıcısını, minimum & max miktarları arasındaki her bir değerin karşısına ayarlanacak değerlere sahip olacak şekilde ayarlamaya çalışıyorum.

"0, 25, 50, 100, 250, 500" ifadesini kullanmak istediğim kişi sayısı kadar kaydırılabilir, ancak nasıl yapıldığını bilemez. Onları "Değerler" bölümüne koymak hiç bir şey yapmıyor gibi görünüyor.

<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

Değer başlatıcısı, çoklu başparmak kaydırıcılarının başlangıç ​​konumlarını sağlamak içindir.

Olası değerlerin bir dizisini sağlarım, bu dizinin aralığı boyunca eşlemek için kaydırıcıyı değiştiririm ve sonra sunu dizisini uygun dizi öğesinden okumak üzere değiştiririm.

aralık kaydırma: birden çok parmak versiyonu

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

aralık kaydırma: tek parmak versiyonu

---

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

;

asgari html:

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