Question

我想问一下是否可以禁用部分滑块吗？看起来像这样：

<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<link rel="stylesheet" href="https://code.getmdl.io/1.3.0/material.indigo-pink.min.css">
<script defer src="https://code.getmdl.io/1.3.0/material.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


<input type="range" min="172" max="400" value="400" class="mdl-slider mdl-js-slider " id="range1">

在此示例中，滑块将从0开始，但是在0到172之间，我们无法访问它，因此新的最小值为172。也许我需要使用第二个滑块？

编辑：

我找到了jQuery用户界面的一个例子。

$('#slider').slider({
    value: 50,
    range: false,
    slide: function(event, ui) {
        if(ui.value > 75 && ui.value <= 100){
            return false;
        }
        if(ui.value >= 0 && ui.value <= 25){
            return false;
        }
    }
});

h1 {
    font-family: Helvetica, Arial;   
    font-weight: bold;
    font-size: 18px;
}

body, p{
    font-family: Helvetica, Arial;
}

<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.14/themes/base/jquery-ui.css">

<div id="slider"></div>

滑块的禁用部分

0 个答案: