在约束值处停止 jQuery Mobile 滑块答案

【问题标题】：Stop jQuery Mobile slider at constraint value在约束值处停止 jQuery Mobile 滑块
【发布时间】：2012-09-16 02:20:22
【问题描述】：

我有一个 jQuery Mobile 滑块，最小值为 0，最大值为 100，约束值为 35。如果滑块从 0 开始并且用户开始滑动滑块，我如何让滑块停在35？

【问题讨论】：

那为什么你的最大值设置为100？
滑块的最大值是 100，但是根据其他一些用户确定的因素，它们可能只能滑到 35。我不能将最大值设为 35，因为那会令人困惑如果最大值从 100 变为其他值，则通知用户。

标签： jquery jquery-mobile slider uislider

【解决方案1】：

以下脚本在值为 35 处停止滑块：

$(document).on('change', '#slider-fill', function(e){
    if($("#slider-fill").val() > 35){
       $("#slider-fill").val(35);
       $("#slider-fill").next(".ui-slider").find("div").css("width","35%");
       $("#slider-fill").next(".ui-slider").find("a.ui-slider-handle").css("left","35%");
    }
});

您可以在下面找到一个工作示例：

<!DOCTYPE html> 
<html> 
    <head> 
        <title>Slider Stop</title> 
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
        <link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.1/jquery.mobile-1.1.1.min.css" />
        <script type="text/javascript" src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
        <script type="text/javascript" src="http://code.jquery.com/mobile/1.1.1/jquery.mobile-1.1.1.min.js"></script>
        <script>
            $(document).on('change', '#slider-fill', function(e){
                if($("#slider-fill").val() > 35){
                   $("#slider-fill").val(35);
                   $("#slider-fill").next(".ui-slider").find("div").css("width","35%");
                   $("#slider-fill").next(".ui-slider").find("a.ui-slider-handle").css("left","35%");
                }
            });
        </script>
    </head> 

    <body>
        <!-- /page -->
        <div data-role="page">
            <!-- /header -->
            <div data-role="header" data-theme="b">
                <h1>Slider stop</h1>
            </div>
            <!-- /content -->
            <div data-role="content">
                <label for="slider-fill">Input slider:</label>
                <input type="range" name="slider-fill" id="slider-fill" value="0" min="0" max="100" data-highlight="true" />
            </div>
        </div>
    </body>
</html>

我希望这会有所帮助。

【讨论】：

向我发送了正确的方向。我最终使用了：$(#slider).slider('refresh')。谢谢！