效果图：

代码：

<!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. Westore 1.0 正式发布 - 小程序框架一个就够

    世界上最小却强大的小程序框架 - 100多行代码搞定全局状态管理和跨页通讯 Github: https://github.com/dntzhang/westore 众所周知,小程序通过页面或组件各自的 ...

  2. python3 urllib及requests基本使用

    在python中,urllib是请求url连接的标准库,在python2中,分别有urllib和urllib,在python3中,整合成了一个,称谓urllib 1.urllib.request re ...

  3. configure: error: cannot guess build type; you must specify one解决方法

    原文地址:https://blog.csdn.net/hebbely/article/details/53993141 1.configure: error: cannot guess build t ...

  4. vuex原理

    Vuex 框架原理与源码分析 vuex状态管理到底是怎样一个原理? 状态管理 Vuex框架原理与源码分析 Vuex实现原理解析 Vue刚出不久,Vuex 就出来了,想请教下Vuex做了什么事情? 个人 ...

  5. Effective java ---遵守普遍接受的命名规则

    alibaba的java命名规范如下: . [强制]代码中的命名均不能以下划线或美元符号开始,也不能以下划线或美元符号结束. 反例: _name / __name / $Object / name_ ...

  6. PS调出甜美艺术外景女生照片

    前期思路:拍摄时间大概在下午三四点左右,IOS100 f/1.8 .其实夏天最好的拍摄时间在傍晚五点这样,曝光太强片子会泛白,这张原片首先构图不是很好看,所以我要给它二次构图裁剪一下.下面是裁剪好后的 ...

  7. js在微信、微博、QQ、Safari唤起App的解决方案

    首先看下完整的流程: 简单说下universal link 在iOS9之前,唤起方式和现在安卓是一个的,都是使用scheme进行唤起,这种方式有个小问题,每次唤起,都会给个提示:是否打开xx应用,这样 ...

  8. [转帖]Windows注册表内容详解

    Windows注册表内容详解 来源:http://blog.sina.com.cn/s/blog_4d41e2690100q33v.html 对 windows注册表一知半解 不是很清晰 这里学习一下 ...

  9. npm的nrm命令使用--设置镜像地址

    npm下载会很慢,因为npm默认从国外下载资源,建议修改npm镜像源地址 1.运行npm i nrm -g全局安装nrm包: 2.使用nrm ls查看当前所有可用的镜像源地址以及当前所使用的镜像源地址 ...

  10. CRM/PLM/SCM/MES与ERP的联系与区别

    企业通过专设信息机构.信息主管,配备适应现代企业管理运营要求的自动化.智能化.高技术硬件.软件.设备.设施,建立包括网络.数据库和各类信息管理系统在内的工作平台,提高企业经营管理效率的发展模式. 那么 ...