手柄在 JQuery UI 范围滑块中相互阻塞
Handles blocking each other in JQuery UI range slider
我正在摆弄 jQuery UI 滑块,发现了两个与我非常相似的示例。
但是,第一个滑块允许将手柄拖动到另一个手柄的另一侧,而在第二个滑块中,手柄似乎相互阻挡(即您不能将左侧手柄拖动到右侧手柄的右侧反之亦然)。
谁能给我解释一下,为什么会这样?
这里是fiddle:http://jsfiddle.net/w4gy8p1v/1/
滑块代码:
$(document).ready(function() {
$("#slider").slider({
min: 0,
max: 100,
step: 1,
values: [10, 90],
slide: function(event, ui) {
for (var i = 0; i < ui.values.length; ++i) {
$("input.sliderValue[data-index=" + i + "]").val(ui.values[i]);
}
}
});
$("input.sliderValue").change(function() {
var $this = $(this);
$("#slider").slider("values", $this.data("index"), $this.val());
});
});
<form>
<div>
<input type="text" class="sliderValue" data-index="0" value="10" />
<input type="text" class="sliderValue" data-index="1" value="90" />
</div>
<br />
<div id="slider"></div>
</form>
第二个滑块的代码:
$(function() {
$( "#slider-range" ).slider({
range: true,
min: 0,
max: 500,
values: [ 75, 300 ],
slide: function( event, ui ) {
$( "#amount" ).val( "$" + ui.values[ 0 ] + " - $" + ui.values[ 1 ] );
}
});
$( "#amount" ).val( "$" + $( "#slider-range" ).slider( "values", 0 ) +
" - $" + $( "#slider-range" ).slider( "values", 1 ) );
});
<p>
<label for="amount">Price range:</label>
<input type="text" id="amount" readonly style="border:0; color:#f6931f; font-weight:bold;">
</p>
<div id="slider-range"></div>
差异来自 range
选项 (range: true
)。
当范围选项为真时,滑块手柄不能交叉。
我正在摆弄 jQuery UI 滑块,发现了两个与我非常相似的示例。 但是,第一个滑块允许将手柄拖动到另一个手柄的另一侧,而在第二个滑块中,手柄似乎相互阻挡(即您不能将左侧手柄拖动到右侧手柄的右侧反之亦然)。
谁能给我解释一下,为什么会这样?
这里是fiddle:http://jsfiddle.net/w4gy8p1v/1/
滑块代码:
$(document).ready(function() {
$("#slider").slider({
min: 0,
max: 100,
step: 1,
values: [10, 90],
slide: function(event, ui) {
for (var i = 0; i < ui.values.length; ++i) {
$("input.sliderValue[data-index=" + i + "]").val(ui.values[i]);
}
}
});
$("input.sliderValue").change(function() {
var $this = $(this);
$("#slider").slider("values", $this.data("index"), $this.val());
});
});
<form>
<div>
<input type="text" class="sliderValue" data-index="0" value="10" />
<input type="text" class="sliderValue" data-index="1" value="90" />
</div>
<br />
<div id="slider"></div>
</form>
第二个滑块的代码:
$(function() {
$( "#slider-range" ).slider({
range: true,
min: 0,
max: 500,
values: [ 75, 300 ],
slide: function( event, ui ) {
$( "#amount" ).val( "$" + ui.values[ 0 ] + " - $" + ui.values[ 1 ] );
}
});
$( "#amount" ).val( "$" + $( "#slider-range" ).slider( "values", 0 ) +
" - $" + $( "#slider-range" ).slider( "values", 1 ) );
});
<p>
<label for="amount">Price range:</label>
<input type="text" id="amount" readonly style="border:0; color:#f6931f; font-weight:bold;">
</p>
<div id="slider-range"></div>
差异来自 range
选项 (range: true
)。
当范围选项为真时,滑块手柄不能交叉。