jRange滑动选取数值范围插件

当我们在页面上需要选择数值范围时，如购物时选取价格区间，购买主机时自主选取CPU，内存大小配置等，使用直观的滑块条直接选取想要的数值大小即可，无需手动输入数值，操作简单又方便。

为大家介绍一款jquery插件jRange;

官网地址：http://nitinhayaran.github.io/jRange/demo/

git地址：https://github.com/nitinhayaran/jRange

html代码：<div class="demo">
<input type="hidden" class="slider-input01" value="23" /><a>获取值</a>
</div>
<div class="demo">
<input type="hidden" class="slider-input02" value="50" /><a>获取值</a>
</div>
<div class="demo">
<input type="hidden" class="slider-input03" value="20" /><a>获取值</a>
</div>
<div class="demo">
<input type="hidden" class="slider-input04" value="40" /><a>获取值</a>
</div>
<div class="demo">
<input type="hidden" class="slider-input05" value="40" /><a>获取值</a>
</div>

js代码：

$('.slider-input01').jRange({
from: 0,
to: 100,
step: 1,
scale: [0,25,50,75,100],
format: '%s',
width: 300,
showLabels: true
});

$('.slider-input02').jRange({
from: 0,
to: 100,
step: 1,
scale: [0,20,40,60,80,100],
format: '%s',
width: 400,
showLabels: true
});

$('.slider-input03').jRange({
from: 0,
to: 100,
step: 20,
scale: [0,20,40,60,80,100],
format: '%s',
width: 300,
showLabels: true
});

$('.slider-input04').jRange({
from: 0,
to: 100,
step: 1,
scale: [0,20,40,60,80,100],
format: '%s',
width: 300,
showLabels: true,
isRange:true
});

$('.slider-input05').jRange({
from: 0,
to: 100,
step: 1,
scale: [0,20,40,60,80,100],
format: '%s',
width: 300,
showLabels: true,
disable:true
});

$('.demo a').on('click',function(){
alert($(this).siblings('input').val());
});

demo地址：http://test.ixiewei.com/jRange/

jRange

jRangejRange