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