Question

我正在使用jquery - Filamentgroup滑块。我想限制滑块移动。

的Javascript

$('select#valueA, select#valueB').selectToUISlider({
            sliderOptions: {
                    change:function(e, ui) {
                        return false;

                    }
            },
            labels: 12
        });

HTML

<fieldset>
        <label for="valueA">From:</label>
        <select name="valueA" id="valueA">
            <option value="6am">6:00</option>
            <option value="7am">7:00</option>
            <option value="8am">8:00</option>
            <option value="9am" selected="selected">9:00</option>
            <option value="10am">10:00</option>
            <option value="11am">11:00</option>
            <option value="Noon">Noon</option>
            <option value="1pm">1:00</option>
            <option value="2pm">2:00</option>
            <option value="3pm">3:00</option>
            <option value="4pm">4:00</option>
            <option value="5pm">5:00</option>
            <option value="6pm">6:00</option>
            <option value="7pm">7:00</option>
            <option value="8pm">8:00</option>
            <option value="9pm">9:00</option>
            <option value="10pm">10:00</option>
            <option value="11pm">11:00</option>
            <option value="12pm">12:00</option>
        </select>

        <label for="valueB">To:</label>
        <select name="valueB" id="valueB">
            <option value="6am">6:00</option>
            <option value="7am">7:00</option>
            <option value="8am">8:00</option>
            <option value="9am">9:00</option>
            <option value="10am">10:00</option>
            <option value="11am">11:00</option>
            <option value="Noon">Noon</option>
            <option value="1pm">1:00</option>
            <option value="2pm">2:00</option>
            <option value="3pm">3:00</option>
            <option value="4pm">4:00</option>
            <option value="5pm">5:00</option>
            <option value="6pm">6:00</option>
            <option value="7pm">7:00</option>
            <option value="8pm">8:00</option>
            <option value="9pm" selected="selected">9:00</option>
            <option value="10pm">10:00</option>
            <option value="11pm">11:00</option>
            <option value="12pm">12:00</option>
        </select>
    </fieldset>

如何控制滑块移动。这意味着如果有人将滑块移动到某个位置，我需要务实地将滑块移动到特定位置。

我该怎么做？

Answer 1

插件不允许通过select元素覆盖最小值和最大值，你应该使用输入元素

<input type="range" name="slider" id="slider" value="0" min="0" max="1"  />

然后

$('#slider').selectToUISlider();

Answer 2

您尝试实现的目标并不是很积极，但是查看Jquery-UI网站上slider control的代码示例可能非常有用。这是一个从那里直接抬起的人：

的Javascript

<script>
$(function() {
    $( "#slider-range-min" ).slider({
        range: "min",
        value: 37,
        min: 20,  //valueA
        max: 50,  //valueB
        slide: function( event, ui ) {
            $( "#amount" ).val( "$" + ui.value );
        }
    });
$( "#amount" ).val( "$" + $( "#slider-range-min" ).slider( "value" ) );
});
</script>

HTML

<body>
<p>
    <label for="amount">Maximum price:</label>
    <input type="text" id="amount" style="border: 0; color: #f6931f; font-weight: bold;" />
</p>
<div id="slider-range-min"></div>
</body>

以下是jsfiddle

的代码

如何在jquery滑块中设置最小值和最大值？

2 个答案:

HTML