实现这个效果怎么弄呢？

<!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. 【 D3.js 选择集与数据详解 — 4 】 enter和exit的处理方法以及处理模板

    绑定数据之后,选择集分为三部分:update.enter.exit.这三部分的处理办法是什么呢?本文将讲解其处理方法,以及一个常用的处理模板. 1. enter的处理方法 如果没有足够的元素,那么处理 ...

  2. 关于app transfer之后的开发

    原文  http://blog.csdn.net/donghong2008/article/details/38020855 网络上有很多开发者提问怎么转让App并想知道具体的流程.实际上Appsto ...

  3. App集成支付宝

    转自:http://www.cnblogs.com/qianxudetianxia/archive/2012/04/04/2432406.html 手机的在线支付,被认为是2012年最看好的功能,我个 ...

  4. Effect-Compiler Tool(fxc.exe)

    提前编译shader文件,提高运行时的效率. refer to http://msdn.microsoft.com/en-us/library/windows/desktop/bb509710%28v ...

  5. 【原】 Spark中Worker源码分析（一）

    Worker作为对于Spark集群的健壮运行起着举足轻重的作用,作为Master的奴隶,每15s向Master告诉自己还活着,一旦主人(Master>有了任务(Application),立马交给 ...

  6. 微软Build2014大会干货总结-2

    继昨天微软在Build2014大会上宣布一系列重磅举措后,第二天的主题是微软云(Microsoft Azure)及开发者战略,CSDN记者继续从旧金山现场给您发来一线报道. 第二天的主角是新上任的微软 ...

  7. 一些有用的Azure工具

    目前,Azure 没有为客户提供监控和管理托管服务的完整解决方案.为了获取网络信息,speedtest.net 提供了一种工具,用于测量响应时间.带宽和整体连接质量.可以使用 Matthew Roso ...

  8. SVM 支持向量机

          学习策略:间隔最大化(解凸二次规划的问题) 对于上图,如果采用感知机,可以找到无数条分界线区分正负类,SVM目的就是找到一个margin 最大的 classifier,因此这个分界线(超平 ...

  9. algorithm@ KMP

    一. KMP算法 KMP算法是一种改进的字符串匹配算法,由D.E.Knuth与V.R.Pratt和J.H.Morris同时发现,简称KMP算法.KMP算法的关键是利用匹配失败后的信息,尽量减少模式串与 ...

  10. POJ2773 - Happy 2006(欧拉函数)

    题目大意 给定两个数m,k,要求你求出第k个和m互质的数 题解 我们需要知道一个等式,gcd(a,b)=gcd(a+t*b,b) 证明如下:gcd(a+t*b,b)=gcd(b,(a+t*b)%b)= ...