带有jQuery UI的滑块值显示 – 2个句柄

我想构建一个带有两个手柄的滑块,手柄值显示在手柄内或手柄上方。 到目前为止我做了。

$( "#slider" ).slider({ range: true, min: 3600, max: 86400, values: [ 28800, 86400 ] }); 

看这个演示 。 如果您有任何困惑,请不要犹豫,问我。

HTML

  

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; }