实现这个效果怎么弄呢？
<!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; 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
如果有比较好的其他方案，欢迎补充一下 谢谢！