效果图：

代码：

<!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. redis底层设计（四）——功能的实现

    redis中我们会经常用到事务.订阅与发布.Lua脚本以及慢查询日志,接下来我们就一一对他们进行探讨学习. 4.1事务 redis通过MULTI.DISCARD.EXEC和WATCH四个命令来实现事务 ...

  2. EntityFramework Core并发导致显式插入主键问题

    前言 之前讨论过EntityFramework Core中并发问题,按照官网所给并发冲突解决方案以为没有什么问题,但是在做单元测试时发现too young,too simple,下面我们一起来看看. ...

  3. 图解HTTP，TCP，IP，MAC的关系

    入门 用户发了一个HTTP的请求,想要访问我们网站的首页,这个HTTP请求被放在一个TCP报文中,再被放到一个IP数据报中,最终的目的地就是我们的115.39.19.22. 进阶 IP数据报其实是通过 ...

  4. 【全网最全的博客美化系列教程】01.添加Github项目链接

    全网最全的博客美化系列教程相关文章目录 [全网最全的博客美化系列教程]01.添加Github项目链接 [全网最全的博客美化系列教程]02.添加QQ交谈链接 [全网最全的博客美化系列教程]03.给博客添 ...

  5. 使用insert ignore来避免向数据库重复插入数据

    mysql中 insert ignore 的使用示例如下: INSERT IGNORE INTO `table_name` (`reportid`, `content`) VALUES (‘11111 ...

  6. PySpider框架的基本用法

    pyspider安装: 3.7之后无法正常使用,使用可以下载Python3.6或以下,或者修改pyspider内部代码 ———————————————————————————————————————— ...

  7. 容器化-Docker介绍

    导读:本文章对Docker技术进行了介绍,阐述了Docker的技术发展历程.容器与虚拟机的差异.Docker原理.特点.Docker三组件和Docker带来的影响,为我们进一步理解Docker打下基础 ...

  8. 【学习总结】Git学习-参考廖雪峰老师教程七-标签管理

    学习总结之Git学习-总 目录: 一.Git简介 二.安装Git 三.创建版本库 四.时光机穿梭 五.远程仓库 六.分支管理 七.标签管理 八.使用GitHub 九.使用码云 十.自定义Git 期末总 ...

  9. 爬虫——xpath

    1.什么是xpath? Xpath,全称XML Path Language,即XML路径语言.它是一门在XML之后查找信息的语言,也同样适用于HTML文档的搜索.在做爬虫的时候,我们用XPath语言来 ...

  10. JEECG SSO kisso

    kisso: java 基于 Cookie 的 SSO 中间件 kisso https://gitee.com/baomidou/kisso kisso首页.文档和下载 - 基于 Cookie 的 S ...