效果图：
代码：
<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>jQuery UI Slider - Range slider</title> <link rel="stylesheet" href="https://cdn.bootcss.com/jqueryui/1.12.1/jquery-ui.css"> <script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.js"></script> <script src="https://cdn.bootcss.com/jqueryui/1.12.1/jquery-ui.js"></script> <style> body { font-size: 13px; font-family: Arial, Helvetica, sans-serif; } table { font-size: 1em; } .ui-draggable, .ui-droppable { background-position: top; } .tooltip { position: absolute; left: -10px; width: 200px; color: black; } .tooltip.odd { top: -25px; } .tooltip.even { top: 25px; } </style> <script> var values = [0.3, 0.5, 0.7, 0.8]; var tooltip1 = $('<div class="tooltip odd"><span>空闲阈值：</span><span class="val">' + values[0] + '</span></div>'); var tooltip2 = $('<div class="tooltip even"><span>最小持续压力：</span><span class="val">' + values[1] + '</span></div>'); var tooltip3 = $('<div class="tooltip odd"><span>最大持续压力：</span><span class="val">' + values[2] + '</span></div>'); var tooltip4 = $('<div class="tooltip even"><span>临界压力：</span><span class="val">' + values[3] + '</span></div>'); $(function () { $("#slider-range").slider({ range: false, min: 0.1, max: 0.9, step: 0.1, values: values, slide: function (event, ui) { if (ui.values[0] >= ui.values[1] || ui.values[1] >= ui.values[2] || ui.values[2] >= ui.values[3] || ui.values[3] >= ui.values[4]) { return false; } $(ui.handle).find(".val").html(ui.value); $("#val1").val(ui.values[0]); $("#val2").val(ui.values[1]); $("#val3").val(ui.values[2]); $("#val4").val(ui.values[3]); } }); $("#slider-range .ui-slider-handle").each(function (i, obj) { var tooltip; if (i == 0) { tooltip = tooltip1; } else if (i == 1) { tooltip = tooltip2; } else if (i == 2) { tooltip = tooltip3; } else if (i == 3) { tooltip = tooltip4; } $(obj).append(tooltip); var spans = $(obj).find("span"); var width = 1; for (var span of spans) { width += $(span).width(); } if(width % 2 == 1){ width += 1; } $(obj).find(".tooltip").css("left", 11-width/2).css("width", width); }); $("#val1").val(values[0]); $("#val2").val(values[1]); $("#val3").val(values[2]); $("#val4").val(values[3]); }); </script> </head> <body> <p> 空闲压力：<input type="text" id="val1" readonly style="border:0; color:#f6931f; font-weight:bold;"><br/> 最小持续压力：<input type="text" id="val2" readonly style="border:0; color:#f6931f; font-weight:bold;"><br/> 最大持续压力：<input type="text" id="val3" readonly style="border:0; color:#f6931f; font-weight:bold;"><br/> 临界压力：<input type="text" id="val4" readonly style="border:0; color:#f6931f; font-weight:bold;"> </p> <div id="slider-range"></div> </body> </html>