Question

I want to use the jQuery UI Slider

I Used this code:

            $( ".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+"%");
                }
            });

I set the min and max as I want them for the scale of the slider.
But I want to set one more min and max values, that the user will can’t cross them on the slider.

It is possible?

Answer 1

You should use that min max for sliding, otherwise there is 1 more option:

$( ".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;
                }
            }
        });

Live demo: http://jsfiddle.net/86ZeV/