jQuery UI 滑块 - 最大值

【问题标题】：jQuery UI Slider - max valuejQuery UI 滑块 - 最大值
【发布时间】：2011-12-21 11:04:43
【问题描述】：

我想使用 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+"%");
                }
            });

我为滑块的比例设置了我想要的最小值和最大值。但我想再设置一个最小值和最大值，用户将无法在滑块上越过它们。

有可能吗？

【问题讨论】：

标签： jquery user-interface slider

【解决方案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/

【讨论】：