效果图：

代码：

<!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. 比起Windows，怎样解读Linux的文件系统与目录结构？

    比起Windows,怎样解读Linux的文件系统与目录结构? Linux 和Windows的文件系统有些不同,在学习使用 Linux 之前,若能够了解这些不同,会有助于后续学习. 本文先对Window ...

  2. Feign性能优化注意事项

    一.FeignClient注解 FeignClient注解被@Target(ElementType.TYPE)修饰,表示FeignClient注解的作用目标在接口上 @FeignClient(name ...

  3. Docker 最佳入门

    https://www.cnblogs.com/lanxiaoke/p/10432631.html https://www.cnblogs.com/viter/p/10463907.html http ...

  4. babel-preset-env使用指南

    文章概览 babel-preset-env是非常重要且常用的一个插件预设,掌握它的用法以及实现原理非常有必要. 本文主要内容包括:babel-preset-env是什么.入门实例.如何配置以支持特定版 ...

  5. from bs4 import BeautifulSoup 报错

    一: BeautifulSoup的安装: 下载地址:https://www.crummy.com/software/BeautifulSoup/bs4/download/4.6/ 下载后,解压缩,然后 ...

  6. MySQLl导入导出SQL文件

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

  7. 聊一聊跨域，Vue向Django请求数据的一些问题

    1.做前后端分离 前端使用Vue程序,后端使用Django配合rest-framework. 那么前端Vue通过API接口拿到数据会出现跨域的问题,JSONP只是在get中会用到的,所以这里使用cor ...

  8. Vector源码分析

    Vector与ArrayList底层实现基本类似,底层都是用数组实现的,最大的不同是Vector是线程安全的.ArrayList源码分析请参考ArrayList源码分析 一.源码分析 基于jdk1.7 ...

  9. Linux 典型应用之缓存服务

    memcached 安装和简单使用 yum install memcached 启动 -d 表示以守护进程的方式启动 memcached -d 安装telnet 它可以检测某个端口是否是通的,可以发送 ...

  10. 微信小程序错误码参考大全

    开发过程中,会遇到很多微信返回的状态码,鬼知道代表什么意思,现在好了,整理总结了一份状态码,方便大家. 转载:http://www.yiyongtong.com/archives/view-1856- ...