Подтвердить что ты не робот

Фиксированные значения слайдера пользовательского интерфейса jQuery

Я пытаюсь заставить ползунок jQuery устанавливать заданные значения для скольжения в отличие от каждого числа между минимальными и максимальными суммами.

Я хочу "0, 25, 50, 100, 250, 500" как единственные суммы, которые люди могут скользить, но не могут понять, как это делается. Помещение их в часть "Значения", похоже, ничего не делает.

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

ОТВЕТЫ

Ответ 1

Инициализатор значений предназначен для обеспечения начальных позиций слайдеров с большим числом символов.

Я бы предоставил массив возможных значений, изменил ползунок для отображения по диапазону этого массива, а затем изменил ваш бит представления для чтения из соответствующего элемента массива.

слайдер диапазона: версия с несколькими флагами

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

слайдер диапазона: версия с одним большим пальцем

$(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:

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

enter image description here