转自：https://www.cnblogs.com/nihaorz/p/8339911.html

效果图：
代码：
<!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>
示例下载：https://files.cnblogs.com/files/nihaorz/slider.zip
本站仅提供存储服务，所有内容均由用户发布，如发现有害或侵权内容，请点击举报。