问题
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 ]
});
回答1:
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;
}
来源：https://stackoverflow.com/questions/21534628/slider-value-display-with-jquery-ui-2-handles