2009-05-13 10 views
16

Próbuję ustawić suwak jQuery w wartości ustawionej jako suwak w stosunku do każdej liczby pomiędzy minimalnymi liczbami minimalnymi &.Poprawione wartości suwaka jQuery UI

Chcę, aby "0, 25, 50, 100, 250, 500" były jedynymi kwotami, które ludzie mogą przesuwać, ale nie mogą ustalić, jak to się robi. Umieszczenie ich w części "Wartości" najwyraźniej nic nie da.

<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> 

Odpowiedz

40

Inicjator wartości służy do podawania pozycji początkowych suwaków wielokrotnego kliknięcia.

Chciałbym podać tablicę możliwych wartości, zmienić suwak, aby odwzorować zakres tej tablicy, a następnie zmienić bit prezentacji, aby odczytać z odpowiedniego elementu tablicy.

zakres suwak: wielokrotnego kciuk wersja

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

enter image description here

zakres suwak: single-kciuk wersja


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

;

minimum html:

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

enter image description here

+0

+1 Działa to wspaniale! Świetne, jeśli chcesz, aby wartości miały stałą wizualną szerokość między nimi. Teraz muszę tylko rozszerzyć CJuiSliderInput, aby zaimplementować to zachowanie w Yii;) –

+2

@great_llama, twoja wersja generuje 2 kciuki na suwaku, więc możesz przeciągnąć oba. Zmodyfikowałem go na wypadek, gdy potrzebujesz tylko jednego kciuka do przeciągnięcia. http://jsfiddle.net/8B4wY/2/. Dodam to do twojej odpowiedzi, jeśli ktoś potrzebuje dokładnie jednej wersji, jeśli uważasz, że to nie należy, usuń ją. – rmagnum2002

+0

W drugim przykładzie: 'suwak zakresu: wersja z jednym kciukiem' wartość' min' powinna wynosić '0'. – kolobok

Powiązane problemy