效果图：

代码：

<!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

基于jQuery-ui实现多滑块slider的更多相关文章

  1. 基于jQuery UI的tabs选项卡美化

    很多朋友对JS望而生畏,但听很多朋友说jQuery很简单,因此开始使用jQuery,使用之后发现,只会写简单的功能,复杂的功能还是不太会写或者总是担心自己写的有性能问题,对前端人员来说只能通过不断学习 ...

  2. 一款基于jquery ui的动画提交表单

    今天要给大家分享一款基于jquery ui的动画提交表单.这款提交表单的的效果是以动画的形式依次列表所需填写的信息.效果非常不错,效果图如下: 在线预览   源码下载 实现的代码. html代码: & ...

  3. 一款基于jquery ui漂亮的可拖动div实例

    今天要给大家带来一款基于jquery ui漂亮的可拖动div实例.这款实例用了图片当背景,div层采用了幽灵透明效果.div拖动是基于jquery ui的.界面非常漂亮.一起看下效果图: 在线预览   ...

  4. 基于jQuery UI的调色板插件推荐colorpicker

    1.下载地址 点击网页最下端Download,即可下载 2.使用方法 本插件是基于jQuery UI,所以应该先行下载jQuery UI,当然jQuery也必不可少 引入和初始化   引入js文件 & ...

  5. 基于Jquery UI的autocompelet改写，自动补全控件，增加下拉选项，动态设置样式，点击显示所有选项，并兼容ie6+

    Jquery UI的autocompelete改写 注意:实现功能,除了原版的自动补全内容外,增加一个点击显示所有选项,样式能动态设置. 加载数据的来源为后台数据库读取. 具体代码如下: 引用 从官方 ...

  6. 基于Jquery ui 可复用的酒店 web页面选择入住日期插件

    效果图: 代码: <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" ...

  7. 基于jquery ui修改的不依赖第三方的背景透明的弹出div

    效果图: 代码: <!doctype html> <html> <head> <meta charset="utf-8"> < ...

  8. 《基于JQuery和CSS的特效整理》系列分享专栏

    <基于JQuery和CSS的特效整理>已整理成PDF文档,点击可直接下载至本地查阅https://www.webfalse.com/read/201724.html 文章 一款基于jQue ...

  9. 基于jQuery全屏相册插件zoomVisualizer

    基于jQuery全屏相册插件zoomVisualizer.这是一款基于jquery ui实现的相册插件,支持隐藏显示相册缩略图,支持左右箭头切换图片,支持放大缩及缩小图片.效果图如下: 在线预览    ...

  10. 基于jquery的可拖动div

    昨天给大家介绍了一款基于jquery ui漂亮的可拖动div实例,今天要给大家分享一款基于jquery的可拖动div.这款可拖动div只要引用jquery就可以,无需引用jquery ui.还实时记录 ...

随机推荐

  1. Maven学习第3期---m2eclipse使用

    一.m2eclipse简介 和Nexus一样,m2eclipse也是Sonatype出品的一款开源工具,它基于Eclipse Public License-v.10开源许可证发布,用户可以免费下载并使 ...

  2. Maven项目pom.xml文件简单解析

    Maven项目pom.xml简单解析 <project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="h ...

  3. 【Java并发.5】基础构建模块

    本章会介绍一些最有用的并发构建模块,有丶东西(最后一小节,纯干货). 5.1 同步容器类 同步容器类包括 Vector 和 Hashtable ,这些类实现线程安全的方式是:将它们的状态封装起来,并对 ...

  4. 初次接触CSS变量

    本文的目的主要是展示CSS变量是如何工作的.随着Web应用程序变得越来越大,CSS变得越来越大,越来越多,而且很多时候都很乱,在良好的上下文中使用CSS变量,为您提供重用和轻松更改重复出现的CSS属性 ...

  5. python中各个response使用

    Python django中我们经常用的response有django中的 JsonResponse, HttpResponse,还有DRF中的Response 在使用的时候,经常会不知道如何什么时候 ...

  6. Appium-实现手势密码登陆

    前言: 前几天有人问我,手势登陆如何做?于是我找了一个APP试了试,所以本文来总结使用Python+Appium来实现手势密码登陆APP. 环境: MacOS:10.13.4 Appium-deskt ...

  7. Day9 Python基础之函数基础（七）

    参考链接:https://www.cnblogs.com/yuanchenqi/articles/5828233.html 1.函数的定义 定义: 函数是指将一组语句的集合通过一个函数名封装起来,要想 ...

  8. MySQLl导入导出SQL文件

    window 1.导出整个数据库 mysqldump -u 用户名 -p 数据库名 > 导出的文件名 mysqldump -u dbuser -p dbname > dbname.sql ...

  9. Jenkins ChangeLog

    Log changes in Jenkins - Stack Overflowhttps://stackoverflow.com/questions/13631145/log-changes-in-j ...

  10. Azure系列2.1.9 —— CloudBlob

    (小弟自学Azure,文中有不正确之处,请路过各位大神指正.) 网上azure的资料较少,尤其是API,全是英文的,中文资料更是少之又少.这次由于公司项目需要使用Azure,所以对Azure的一些学习 ...