实现这个效果怎么弄呢？

<!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. （转载）PHP 下 CURL 通过 POST 提交表单失败的原因之一与解决办法

    (转载)http://blog.renren.com/share/246611432/7511385884 前几天在学习使用 CURL 时遇到一个问题:在 a.php 中以 POST 方式向 b.ph ...

  2. 文件写操作--WriteLog

    private static void Write(string sMsg, string fileName) { if (sMsg != "") { try { var dir ...

  3. [Tommas] UNION 和 UNION ALL 的区别

    UNION指令的目的是将两个 SQL 语句的结果合并起来.从这个角度来看,UNION跟 JOIN 有些许类似,因为这两个指令都可以由多个表格中撷取资料.UNION的一个限制是两个 SQL 语句所产生的 ...

  4. 【原】Redis入门教程

    最近在学习Redis,写几篇文章记录一下学习过程:Redis入门教程. 1.Redis基本概念 Redis Redis Keys Redis 基本数据类型 Redis基本操作 遍历操作 Pub-Sub ...

  5. 无法连接 mysql

    ==================================================================================================== ...

  6. mybatis的$存在安全问题，为什么又不得不用？

    1.mybatis的官网关于$和#的字符串替换符号区别描述如下: http://www.mybatis.org/mybatis-3/zh/sqlmap-xml.html#Parameters 上面的意 ...

  7. ONIX 实例

    <?xml version="1.0"?><!DOCTYPE ONIXMessage SYSTEM"http://www.editeur.org/oni ...

  8. SQL Server解决死锁问题

    用以下语句查询所有死锁的进程号和表名: SELECT  request_session_id spid,  OBJECT_NAME(   resource_associated_entity_id   ...

  9. STM32F030 IO口外部中断应用

    //==文件exit.h============================================================ #ifndef __EXIT_H #define __ ...

  10. block_dump观察Linux IO写入的具体文件(mysqld）

      一.使用方法: 二.基本原理: 三.总结 很多情况下开发者调测程序需要在Linux下获取具体的IO的状况,目前常用的IO观察工具用vmstat和iostat,具体功能上说当然是iostat更胜一筹 ...