Question

我想使用jQuery UI Slider

我使用了这段代码：

            $( ".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/

jQuery UI Slider - 最大值

1 个答案: