jQuery UI Slider - максимальное значение

Question

Я хочу использовать слайдер jQuery UI

Я использовал этот код:

            $( ".slider" ).slider({
                value:50,
                min: 0,
                max: 100,
                slide: function( event, ui ) {
                    $(this).parent().children('.leftColumn').css("width",ui.value+"%");
                    $(this).parent().children('.rightColumn').css("width",100-ui.value+"%");
                }
            });

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

Это возможно?

Answer 1

Вы должны использовать этот минимум максимум для скольжения, в противном случае есть еще 1 опция:

$( ".slider" ).slider({
            value:50,
            min: 0,
            max: 100,
            slide: function( event, ui ) {
                if( ui.value < 10 || ui.value > 30 ) 
                {
                    $(this).slider("value", (ui.value < 10 ? 10 : 30));
                    return false;
                }
                $(this).parent().children('.leftColumn').css("width",ui.value+"%");
                $(this).parent().children('.rightColumn').css("width",100-ui.value+"%");
            },
            stop : function(event, ui){
                if( ui.value < 10 || ui.value > 30 ) 
                {
                    $(this).slider("value", (ui.value < 10 ? 10 : 30));
                    return false;
                }
            }
        });

Демонстрационная версия: http://jsfiddle.net/86ZeV/