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/