实现这个效果怎么弄呢？

<!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. Android学习之路——简易版微信为例（三）

    最近好久没有更新博文,一则是因为公司最近比较忙,另外自己在Android学习过程和简易版微信的开发过程中碰到了一些绊脚石,所以最近一直在学习充电中.下面来列举一下自己所走过的弯路: (1)本来打算前端 ...

  2. LinkedHashSet的实现原理

    1. LinkedHashSet概述 LinkedHashSet是具有可预知迭代顺序的Set接口的哈希表和链接列表实现.此实现与HashSet的不同之处在于,后者维护着一个运行于所有条目的双重链接列表 ...

  3. C++类型引用浅析

    C++类型引用浅析 引言 从最早被Bjarne Stroustrup 发明,作为C语言的扩展,到广为人知C++98标准,再到最新的C++11.C++14和C++17标准,C++一直在不断地进步.演化. ...

  4. [codevs4247]奇特的生物

    题目描述 Description 科学家们最近发现了一种奇怪的生物,它们每天长大一岁,刚出生的宝宝为1岁,且它们的年龄没有上限.已知年龄为1岁,2岁,3岁,……,k岁的个体具有生育能力,当年龄为i的具 ...

  5. POJ 2533 Longest Ordered Subsequence （LIS DP）

    最长公共自序列LIS 三种模板,但是邝斌写的好像这题过不了 N*N #include <iostream> #include <cstdio> #include <cst ...

  6. HDOJ-ACM1021(JAVA)

    题意: 斐波拉契数列的另外一个变型,如果F(n)能被3整除,则输出yes,否则输出no.(n<1000000) 解题思路: 看到(n<1000000)这个条件,有点感觉递归量有点大,因此要 ...

  7. UVa11584 - Partitioning by Palindromes(区间DP)

    题目大意 给定一个小写字母组成的字符串S,你的任务是划分成尽量少的回文串 题解 方程就是dp[j]=min(dp[i-1]+1)(i<=j,s[i..j]是回文串) 代码: #include&l ...

  8. 微软2016校园招聘4月在线笔试 ABC

    题目链接:http://hihocoder.com/contest/mstest2016april1/problems 第一题:输入N,P,W,H,代表有N段文字,每段有ai个字,每行有⌊W/S⌋个字 ...

  9. Stream消息流 和 Stream Grouping 消息流组

  10. [转帖] 安装Eclipse插件长时间卡在 calculating requirements and dependencies

    把"Contact all update sites during install to find required software"前面的勾去掉,然后点击下一步,这样之后问题迎 ...