Остановить ползунок пользовательского интерфейса jQuery от перемещения за заданное значение?

На моей странице есть несколько слайдеров. Всем им нужен одинаковый масштаб, но некоторые из них доходят до 150, а некоторые до 200. Я хотел бы установить максимальное значение для них всех на 200, но не позволять некоторым из них двигаться дальше 150. Они разные $() .slider(), поэтому меня просто интересует, как установить максимальное значение ползунка на 200, но не допускать никаких движений за пределы 150...

Я бы подумал, что такое поведение будет встроено, но, видимо, нет?

К вашему сведению: я использую диапазон: «мин» для этих ползунков.

ИЗМЕНИТЬ

http://jsfiddle.net/D9nAx/1/


javascript slider jquery jquery-ui jquery-ui-slider
person S16    schedule 14.09.2012    source источник
comment
Пожалуйста, добавьте соответствующий HTML и/или скрипты/css в свой пост, чтобы мы могли улучшить то, что у вас есть. Кроме того, если вы можете создать fidde на jsFiddle.net, это также позволит нам опробовать различные решения.   -  person Nope    schedule 14.09.2012
comment
Я уверен, что вы можете использовать события ползунка для управления его поведением.   -  person Musa    schedule 14.09.2012
comment
добавлена ​​ссылка: jsfiddle.net/D9nAx/1   -  person S16    schedule 14.09.2012

Ответы (2)


arrow_upward
7
arrow_downward

использовать событие слайда:

$( "#slider-vertical" ).slider({
    orientation: "vertical",
    range: "min",
    min: 0,
    max: 200,
    value: 60,
    slide: function( event, ui ) {
        if(ui.value> 150)
            return false;
        $( "#amount" ).val( ui.value );
    }
});

скрипка: http://jsfiddle.net/dvz8E

person Jarry    schedule 14.09.2012
comment
Это нехорошо, иногда, если вы быстро перемещаете мышь, она останавливается, скажем, на 147. Требуется $(this).slider( "value" , 150 ); в условии >150. - person gunwin; 14.09.2012
comment
@Grantunwin, я не могу воспроизвести это поведение здесь ... какой браузер вы используете? - person Jarry; 14.09.2012
comment
Я использую FireFox 15.0.1. Если вы быстро переместите ползунок вверх, это сработает. - person gunwin; 20.09.2012
comment
Это именно то, что мне нужно. Отлично работает в FireFox и т.д. - person Martyn Chamberlin; 17.10.2014

arrow_upward
2
arrow_downward 

$( "#slider-vertical" ).slider({
    orientation: "vertical",
    range: "min",
    min: 0,
    max: 200,
    value: 60,
    slide: slide
});
function slide(event, ui){
    var result = true;
    if (ui.value > 150){
        $(this).slider( "value" , 150 );
        result = false;
    }
    $( "#amount" ).val( $(this).slider( "value") );
    return result;
}

http://jsfiddle.net/D9nAx/2/

person Musa    schedule 14.09.2012
comment
Это почти идеально. Единственная проблема заключается в том, что если вы скользите вверх слишком быстро, ползунок не будет работать максимально. Если я хочу, чтобы максимальное значение было 150, оно остановится примерно на 147. Есть ли способ установить значение ползунка на 150, если .slider(value) больше 150...? - person S16; 15.09.2012
comment
@Greg-J, у меня он отлично работает во всех последних браузерах, какой браузер используете вы? - person Musa; 15.09.2012
comment
Должно быть, я скопировал более старую версию, так как это не та версия, которую вы изначально опубликовали ... Теперь отлично работает. Спасибо! - person S16; 18.09.2012