带有jQuery UI的滑块值显示-2个句柄 [英] Slider Value Display with jQuery UI - 2 handles
本文介绍了带有jQuery UI的滑块值显示-2个句柄的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我想构建一个带有两个手柄的滑块，其手柄值显示在手柄内或手柄上方.到目前为止，我已经完成了.
I want to build a slider with two handles with the handle value displayed within the handles or above them. I have done so far.
$( "#slider" ).slider({
range: true,
min: 3600,
max: 86400,
values: [ 28800, 86400 ]
});
推荐答案
请参阅此演示.如果您有任何困惑，请随时问我.
See this Demo . IF you have any confusions, don't hesitate to ask me.
HTML
<body>
<div id="slider-range"></div>
</body>
JavaScript
$(function () {
$("#slider-range").slider({
range: true,
min: 0,
max: 500,
values: [75, 300],
slide: function (event, ui) {
var value1 = $("#slider-range").slider("values", 0);
var value2 = $("#slider-range").slider("values", 1);
$("#slider-range").find(".ui-slider-handle:first").text(value1);
$("#slider-range").find(".ui-slider-handle:last").text(value2);
}
});
});
CSS
.ui-slider-handle{
width: 35px !important;
font-size: small !important;
color: #FF0000 !important;
text-align: center !important;
}
这篇关于带有jQuery UI的滑块值显示-2个句柄的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
