JQuery UI: плавный слайдер с одним щелчком (к значению по умолчанию)?

Question

Я хотел бы сделать ползунок, который будет привязан к центру, сохраняя при этом плавные действия в другом месте. Что-то вроде jQuery-версии реального слайдера баланса динамиков. Возможно ли это?

Или я должен просто создать свой собственный ползунок с перетаскиваемым объектом, суженным к одной оси с содержащим его фреймом, привязывающимся к другому объекту (или сетке), расположенному в центре фрейма?

Редактировать: мне просто нужен ползунок, который позволяет значения, например от -10 до -1, 0 и от 1 до 10 (от -1 до 1 с привязкой к 0) с шагом: 0,1

Answer 1

Вы должны иметь возможность использовать ползунок jQuery, но ограничить его движение с помощью события slide :

jSlider.slider({
    // other options...
    slide: function (event, ui) {
        if (ui.value > -1 && ui.value < 1 && ui.value != 0) {
            // force it to 0 between -1 and 1.
            jSlider.slider('value', 0); 
            return false;
        }
        return true;
    }
});

Answer 2

Используйте следующее, чтобы ползунок jquery автоматически привязывался к ближайшему шагу.Хитрость заключается в том, чтобы реализовать свой собственный шаг-интервал-слайдер.Проблема в том, что если ваш максимум и минимум разделены небольшим расстоянием (например, 5-10), ваш слайд будет вести себя пошагово, потому что шаг по умолчанию = 1, поэтому вам нужно вычислить ваш шаг на основе этого.Если ваши максимальные и минимальные значения разделены огромным расстоянием (например, 1-1000 или более), вы можете оставить расчет computed_step и инициализировать его равным 1.

       max_limit = 30;
       min_limit = 5;
       stick_to_steps_of = 5;
       var computed_step = max_term/100; //you can vary the denominator to make it smoother
        $("#my_slider" ).slider({
            animate : true,
            value: max_limit,
            min: min_limit,
            max: max_limit,
            step: computed_step,
            stop: function( event, ui ) {
                d = parseInt(parseInt(ui.value)/stick_to_steps_of);
                rem = parseInt(ui.value)%stick_to_steps_of;
                var fval = 0;
                if (rem <= parseInt(stick_to_steps_of/2)) {
                    fval = d*stick_to_steps_of;
                }else{
                    fval = (d+1)*stick_to_steps_of; 
                }
                $("#my_slider").slider('option', 'value', fval); 
                $('#myslider_current_value').html(fval);  //some placeholder to show the current value
            }
        });

Answer 3

Хммм ... так вот что я представляю себе в голове ... Фон, который скользит по таймеру, как карусель (возможно, это большие изображения), с рядом миниатюрных изображений сверху, которые скользят плавно.Это то, что вы хотите построить?

РЕДАКТИРОВАТЬ: Вот что вам нужно сделать:

Я редко нахожу необходимость использовать плагины jQuery.Вот что вам нужно:

1. Музадаун (на слайдере).api.jquery.com/mousedown/.При отпускании мыши происходит обратный вызов.

2. Отслеживание положения мыши внутри контейнера ползунка при перетаскивании ползунка docs.jquery.com/Tutorials:Mouse_Position

3. Использование анимациифункция для перемещения ползунка, пока ваша мышь еще не отпущена api.jquery.com/animate/ Остановить анимацию при выпуске.

4. Когда ваш слайдер достигнет определенной позиции х в своем контейнере, включите функцию «сглаживания» - то есть другую функцию анимации.