效果图：

代码：

<!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. Java多线程学习(二)---线程创建方式

    线程创建方式 摘要: 1. 通过继承Thread类来创建并启动多线程的方式 2. 通过实现Runnable接口来创建并启动线程的方式 3. 通过实现Callable接口来创建并启动线程的方式 4. 总 ...

  2. 高效、易用、功能强大的 api 管理平台

    前言导读 实际环境的需求可以说是:只有你没想到,没有实现不了的,征对于目前实际开发.测试.生产等环境中,需要用到各类的接口可达几十.甚至上百个,因此,必须需要一个统一管理的工具平台来统一管理这类接口, ...

  3. ProxySQL+Mysql实现数据库读写分离实战

    ProxySQL介绍 ProxySQL是一个高性能的MySQL中间件,拥有强大的规则引擎.具有以下特性:http://www.proxysql.com/ 1.连接池,而且是multiplexing 2 ...

  4. C#.NET 大型通用信息化系统集成快速开发平台 4.1 版本 - 访问记录功能改进

    当用户数据非常庞大时需要一个功能,就是统计各种账户的访问系统的情况,用户数量的各种参数需要让管理者心里有个数. 1:信息系统中有多少有效账户?可以很方便能知道具体个数,让管理者心里有个数. 2:某个公 ...

  5. CISCO交换机-SNMP配置

    1.1     SNMP基础配置 router> enable 进入路由器是用户模式 router# conf terminal 进入路由器的全局配置模式 #snmp-server commun ...

  6. H5 54-清空默认边距

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  7. Maven安装与环境配置（Windows）

    1.下载安装包 在Maven官网下载最新版的安装包:http://maven.apache.org/download.cgi 2.解压安装包 3.配置Maven环境变量 配置M2_HOME环境变量,指 ...

  8. PS调出清新淡雅外景女生背影照

    首先,依然是前期事项. 这套图是八月份下午三点多在草地上拍的(好像标题的秋日欺骗了大众XD),阳光很烈,不过也因为这样,能拍出比较清新的蓝天.用的是腾龙70-200 2.8VC拍摄,长焦在拍这种空旷大 ...

  9. ElasticSearch 入门

    http://www.oschina.net/translate/elasticsearch-getting-started?cmp ElasticSearch 简单入门 返回原文英文原文:Getti ...

  10. 在IDEA中配置Spring的XML装配

    不考虑混合模式的话,Spring有三类装配Bean的方法,自动装配和Java代码装配都会很容易上手,但在弄XML装配时遇到了问题,这与IDEA环境有关. 装配时需要在源码中配置XML文件的位置,我看别 ...