实现这个效果怎么弄呢？

<!DOCTYPE html>

<html>

<head lang="en">

    <meta charset="UTF-8">

    <title></title>

    <link rel="stylesheet" media="screen" href="css/bootstrap.min.css">

    <link rel="stylesheet" media="screen" href="css/bootstrap-slider.css">

    <script src="http://libs.baidu.com/jquery/1.9.0/jquery.js" type="text/javascript"></script>

    <style type='text/css'>

        /* Example 1 custom styles */

        #ex1Slider .slider-selection {

            background: #BABABA;

        }

        /* Example 3 custom styles */

        #RGB {

            height: 20px;

            background: rgb(128, 128, 128);

        }

        #RC .slider-selection {

            background: #FF8282;

        }

        #RC .slider-handle {

            background: red;

        }

        #GC .slider-selection {

            background: #428041;

        }

        #GC .slider-handle {

            background: green;

        }

        #BC .slider-selection {

            background: #8283FF;

        }

        #BC .slider-handle {

            border-bottom-color: blue;

        }

        #R, #G, #B {

            width: 300px;

        }

    </style>

</head>

<body>

<div style="margin-top: 260px;padding-top:360px;background: #fffddd;margin: 0 auto;width: 800px;">

    <!--<input id="ex8" data-slider-id='ex1Slider' type="text" data-slider-min="0" data-slider-max="100" data-slider-step="1" data-slider-value="14"/>-->

    <div class="well">

        <input id="ex8" data-slider-id='ex1Slider' type="text" data-slider-min="0" data-slider-max="100" data-slider-step="1" data-slider-value="1"/>

    </div>

</div>

<script type="text/javascript" src="js/bootstrap-slider.js"></script>

<script>

    // With JQuery

    $("#ex8").slider({

        tooltip: 'always'

    });

    // Without JQuery

//    var slider = new Slider("#ex8", {

//        tooltip: 'always'

//    });

</script>

</body>

</html>
//赋值操作 不过有个小问题，就是界面初始化出现了输入框。。    
$("#ex8").slider({

        tooltip: 'always',

        precision: 2,//两位小数

        value: 8.115 // Slider will instantiate showing 8.12 due to specified precision

    });

DEMO:下载地址：http://download.csdn.net/detail/u012922417/9456646

 

参考地址：https://github.com/seiyria/bootstrap-slider

 

详细说明地址：http://seiyria.com/bootstrap-slider/    2016-03-09

如果有比较好的其他方案，欢迎补充一下 谢谢！

jquery 可拖动进度条的更多相关文章

  1. [Android] SeekBar---可拖动进度条

    SeekBar---可拖动进度条 ()setMax //设置SeekBar最大数值 ()setProgress //设置SeekBar当前数值 ()setSecondaryProgress//设置Se ...

  2. Android——音乐播放器完善——进度条显示当前播放进度，加可拖动进度条（未待解决完问题）

    效果: 问题:可拖动进度条随进度条移动时,会致使音乐卡顿(待解决) xml <?xml version="1.0" encoding="utf-8"?&g ...

  3. UISlider无法拖动进度条的问题解决

    UISlider无法拖动进度条的问题解决 最近业务中的视频播放使用到了UISlider,但是有一个奇怪的问题,就是在Modar出来的控制器中UISlider是可以正常使用的,但是在Push出来的控制器 ...

  4. android中SeekBar拖动进度条的使用及事件监听

    下面和大家分享一下android中SeekBar拖动进度条的使用,以及事件监听.拖动进度条的事件监听需要实现SeekBar.OnSeekBarChangeListener接口,调用SeekBar的se ...

  5. Jquery实现可拖动进度条demo

    html <div class="progress"> <div class="progress_bg"> <div class= ...

  6. jquery——彩色投票进度条

    一.需求 如下图 重点是要实现进度条. 二.分析 html5新增及删除标签一文中提到过html5新增了progress标签.但是肯定有兼容性问题.生成环境不适用,所以要模拟实现. 原理:动态设置< ...

  7. canvas-弧形可拖动进度条

    一.效果如下: See the Pen XRmNRK by pangyongsheng (@pangyongsheng) on CodePen. 链接dome 二. 本文是实现可拖动滑块实现的基本,及 ...

  8. JQuery实战——页面进度条效果

    今早逛阮一峰大神的博客 ECMAScript 6 入门 时候看到页面顶部有个进度条显示当前浏览的进度,如图: 顶部进度条会根据当前页面高度进行宽度调整,实战一番,视觉使用animated方法实现.下面 ...

  9. canvas-圆弧形可拖动进度条

    一.效果如下: See the Pen XRmNRK by pangyongsheng (@pangyongsheng) on CodePen. 链接dome 二. 本文是实现可拖动滑块实现的基本思路 ...

随机推荐

  1. HtmlParser应用,使用Filter从爬取到的网页中获取需要的内容

    htmlparser是一个纯的java写的html解析的库,它不依赖于其它的java库文件,主要用于改造或提取html.它能超高速解析html,而且不会出错.现在htmlparser最新版本为2.0. ...

  2. [转]NHibernate之旅(13)：初探立即加载机制

    本节内容 引入 立即加载 实例分析 1.一对多关系实例 2.多对多关系实例 结语 引入 通过上一篇的介绍,我们知道了NHibernate中默认的加载机制——延迟加载.其本质就是使用GoF23中代理模式 ...

  3. [liu yanling]软件测试分为哪几个计划过程阶段

    a) 计划阶段:编写测试计划,搭建测试环境,准备测试数据b) 设计阶段:编写测试用例(需求分析和测试用例文档)c) 执行阶段:执行测试用例,生成缺陷d) 报告阶段:测试报告,改进意见

  4. 【转】git使用教程

    Git使用教程 一:Git是什么? Git是目前世界上最先进的分布式版本控制系统. 二:SVN与Git的最主要的区别? SVN是集中式版本控制系统,版本库是集中放在中央服务器的,而干活的时候,用的都是 ...

  5. Unity光照图UV显示

    美术的同学觉得 Unity 光照图烘焙的不够美丽,需要在 ps 里修一修,但是不知道每个物体对应的光照图在哪个区域,UV 是如何分布的,于是要求写一个工具显示,于是有了下面这个: 打开场景自动读取当前 ...

  6. Strom的安装及使用

    在使用storm之前,首先看zookeeper是否安装好 单机版 1.在node1上修改配置文件conf下的storm.yaml文件

  7. Linear Regreesion

       3.似然函数:我是这么理解的,比如说我们知道某个X的概率分布密度函数,但是这个概率分布有未知的参数,但是我想得到这个未知的参数θ,然后我们就通过很多个已知的变量,把这些概率分布密度函数乘起来,这 ...

  8. 【Java基础】基础概念

    Java 关键字 被Java语言赋予特定含义的单词  组成关键字的字母全部小写  goto和const作为保留字存在,目前并不使用 一般关键字在IDE中会高亮 用于定义数据类型的关键字 class i ...

  9. HW2.12

    控制台: import java.util.Scanner; public class Solution { public static void main(String[] args) { Scan ...

  10. iOS设备的硬件适配 (关于armv6, armv7, armv7s ) <转>

    <转> http://blog.csdn.net/smking/article/details/8148702 1.OpenGL ES版本支持   iPhone:iPhone 3G以下(包 ...