滑动块在表现进度，人性化选择范围的场景下，非常合适。今天就给大家推荐2款简洁而不简单的jquery滑动块插件：noUiSlider和slideControl。
1、noUiSlider
一个轻量级的，高度可定制的范围滑块noUiSlider。支持谷歌Chrome，火狐，歌剧，Safari浏览器和Internet Explorer7至10。它也支持触摸功能的设备，如iPhone，iPad和Windows8和Android的设备。
使用方法很简单：
配置html：
<div id="colorpicker">
<div class="sliders" id="red"></div>
<div class="sliders" id="green"></div>
<div class="sliders" id="blue"></div>
<div class="result"></div></div>
js代码：
var range = document.getElementById('range');noUiSlider.create(range, {
start: [ 20, 80 ], // Handle start position
step: 10, // Slider moves in increments of '10'
margin: 20, // Handles must be more than '20' apart
connect: true, // Display a colored bar between the handles
direction: 'rtl', // Put '0' at the bottom of the slider
orientation: 'vertical', // Orient the slider vertically
behaviour: 'tap-drag', // Move handle on tap, bar is draggable
range: { // Slider can select '0' to '100'
'min': 0,
'max': 100
},
pips: { // Show a scale with the slider
mode: 'steps',
density: 2
}});
js设置与input输入框同步：
var valueInput = document.getElementById('value-input'),
valueSpan = document.getElementById('value-span');// When the slider value changes, update the input and spanrange.noUiSlider.on('update', function( values, handle ) {
if ( handle ) {
valueInput.value = values[handle];
} else {
valueSpan.innerHTML = values[handle];
}});// When the input changes, set the slider valuevalueInput.addEventListener('change', function(){
range.noUiSlider.set([null, this.value]);});
Css样式：
#showcase {
margin: 0 20px;
text-align: center;}#range {
height: 300px;
margin: 0 auto 30px;}#value-span,
#value-input {
width: 50%;
float: left;
display: block;
text-align: center;
margin: 0;}
2、slideControl.js 范围选择控件
SlideControl jQuery插件可以让你轻松地自定义滑块范围输入。可以设置速度，从而控制滑块动画速度，还可以设置下界和上界来控制最小和最大数。
引用js和样式
<link rel="stylesheet" type="text/css" href="slideControl.css" />
<script type="text/javascript" src="
</script><script type="text/javascript" src="jquery.slideControl.js"></script>
<script type="text/javascript">$(document).ready(function() {
$('.slideControl').slideControl();});
</script>
选项
speed:控件播放的速度，默认 400
lowerBound: , 设置最小量的滑块。最小 1
upperBound:设置滑块可以设置的最大数量 , 最大 10
Html：
<ul>
<li><label>Responsiveness: </label><input type="text" value="6.0" class="slideControl" /></li>
<li><label>Safety: </label><input type="text" value="4.0" class="slideControl" /></li>
<li><label>Information: </label><input type="text" value="9.0" class="slideControl" /></li></ul>