Добавить галочки в интерфейс слайдера

Я довольно javascript и jquery. Я пытаюсь добавить слайдер на свою веб-страницу. Это базовый ползунок, где каждый может выбрать значение от 0 до 100. Я не уверен, как отметить НЕКОТОРЫЕ интервалы в середине.

Это код, который у меня есть до сих пор

  <script>
    $(function() {
    var temp = 0;
        $( "#slider" ).slider({
            animate: true,
            value:temp,
            min: 0,
            max: 100,
            step: 1,
            slide: function( event, ui ) {
                $( "#amount" ).val(ui.value );
            },
            stop: function(event, ui) {          
                temp = ui.value;
                //Do something
            }
        });
        $( "#amount" ).val($( "#slider" ).slider( "value" ) );
    });
    </script>

Он работает правильно. Что я хочу попробовать сделать, так это добавить интервальные маркеры на 0,25, 50, 75 и 100.

Я рассмотрел несколько вопросов по SO, но не уверен, как продолжить реализацию. Был бы признателен за помощь.

Я попробовал эту реализацию: http://jsbin.com/iwime, но это не то, что я пытаюсь сделать, поскольку я просто хочу, чтобы галочки появлялись через эти регулярные промежутки времени, но пользователи по-прежнему могли выбирать другие значения.

Спасибо


slider jquery-ui jquery-ui-slider
person John    schedule 14.09.2012    source источник

Ответы (2)


arrow_upward
0
arrow_downward

Я предполагаю, что вы хотите что-то вроде этого: http://jsbin.com/iwime/116

Таким образом, вместо использования количества тиков в опции max ползунка вы используете любые максимальные единицы, которые хотите предоставить, например. 100. Затем в refershTicks() обновите алгоритм, чтобы переключить класс.

Настройки слайдера:

    var slider = $("#slider").slider({
        ...
        max: 100,     // the only change
        ...
    });

И метод refreshTicks():

    function refreshTicks() {
        var s = slider
            , lo = s.slider("values", 0), hi = s.slider("values", 1);
        var max = s.slider('option', 'max');
        s.find(".tick").each(function(i) {
            var i = (i + 1) * (max/ticks.length) - (max/ticks.length)/2;   // the updated algorithm
            var inRange = (i >= lo && i < hi);
            $(this)
                [(inRange ? 'add' : 'remove') + 'Class']("ui-widget-header")
                [(inRange ? 'remove' : 'add') + 'Class']("ui-widget-content");
        });
    }
person William Niu    schedule 24.09.2012
comment
Да, это то, что я ищу, но мне не нужен ползунок диапазона, все, что я хочу, похоже на ползунок с одним направлением. Как регулятор громкости. - person John; 20.10.2012
comment
Я не уверен, как изменить этот ползунок на то, что я хочу. - person John; 20.10.2012

arrow_upward
0
arrow_downward

Аналогично этому вопросу SO: Ответ от Биджана может помочь.

Реализация ползунка пользовательского интерфейса jQuery, который он предлагает, может помочь вам найти решение: .com/lab/update_jquery_ui_slider_from_a_select_element_now_with_aria_support/

person palmplam    schedule 26.09.2012