实现这个效果怎么弄呢？

<!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使用例子（全） 转载

    1.import java.net.URL;  2.  3.import junit.framework.TestCase;  4.  5.import org.apache.log4j.Logger ...

  2. 一致性哈希算法原理及Java实现

     一致性哈希算法在1997年由麻省理工学院提出的一种分布式哈希(DHT)实现算法,设计目标是为了解决因特网中的热点(Hot spot)问题,初衷和CARP十分类似.一致性哈希修正了CARP使用的简 单 ...

  3. Oracle将英文字符集数据转换成中文

    转换背景:老系统数据为英文字符集,需要将老数据(Oracle 8i)转换到oracle 10g(中文字符集)中 思路:先将老数据从8i的数据库中导出,导出的数据库文件为英文字符集,再将10g的数据库改 ...

  4. jquery 列求和

    列求和 var m = 0; $('#tb tr').each(function () { //td:eq(3)从0开始计数 $(this).find('td:eq(3)').each(functio ...

  5. [liu yanling]软件测试的过程

    测试过程按4个步骤进行,即单元测试.组装测试.确认测试和系统测试.

  6. Spring mvc get和post传值乱码问题

    1.url拼值 传单值 对象 list  map都是用json的格式传入后台 <%@ page language="java" contentType="text/ ...

  7. 链表反转C实现（递归与循环）

    //逆转链表http://blog.163.com/lichunliang1988116@126/blog/static/26599443201282083655446/ #include<io ...

  8. Java笔记(十六)……内部类

    内部类概述 内部类是将一个类定义在另一个类里面,对里面那个类就成为内部类(内部类,嵌套类). 当描述事物时,事物的内部还有事物,该事物用内部类来描述,因为内部事物在使用外部事物的内容 访问特点 内部类 ...

  9. [九度OJ]1011.最大连续子序列

    原题链接:http://ac.jobdu.com/problem.php?pid=1011 题目描述:     给定K个整数的序列{ N1, N2, ..., NK },其任意连续子序列可表示为{ N ...

  10. HW3.16

    public class Solution { public static void main(String[] args) { int randomValue = (int)(Math.random ...