jRange是个强大的范围选择器(Range Selector)。使用它可以轻松实现范围的选择。用户可以用通过滑动手指轻松选择范围:价格，距离，年龄。。。很适合移动端。 话不多说，先上效果图:
jRange范围选择器
来个动图吧
话说HTML5是自带range选择器的，
<input name="a" type="range" min="10" max="50" step="5">
H5自带的range选择器
只不过。。。。。
H5只能选择一个点，不支持范围选择，而且加上数字显示什么的也麻烦。
jRange可以轻松解决这些问题。好用又实在！源码可以在gitHub上下载。
由于官方文档是英文的, 在这里给大家大概翻译一下使用方法。
使用方法
1.在<head>中加入需要的css和js资源
<link rel="stylesheet" href="jquery.range.css">
<script src="jquery.js"></script>
<script src="jquery.range.js"></script>
注意, gitHub的源码中是没有jquery.js的，需要自己下载。
2.在需要用到选择器的地方加入
<input type="hidden" id="age-slider" value="23,40" />
这里的id名是自定义的，也可以用class,只要和下面的js选择器保持一致就行。value的两个值是随着用户的拖动而变化的。
3.在body底部加入
<script>
$(document).ready(function(){
$('#age-slider').jRange({
from: 18,
to: 100,
step: 1,
format: '%s',
width: 300,
showLabels: true,
showScale: false,
isRange : true,
theme: "theme-blue"
});
});
</script>
轻松三部，一个选择器就实现啦。
下面来讲一下配置:
| 选项 | 必选 | 类型 | 说明 |
|---|---|---|---|
| from | 必选 | Integer | 最小值 |
| to | 必选 | Integer | 最大值 |
| step | 可选 | Integer | 增量 (默认为1) |
| scale | 可选 | Array | 刻度条。例如[0,50,100] |
| showLabels | 可选 | Boolean | 显示标签(默认true) |
| showScale | 可选 | Boolean | 显示刻度(默认true) |
| format | 可选 | String/Function | 用来设置标签的格式 例如"%s 天" |
| width | 可选 | Integer | 宽度(默认300) |
| theme | 可选 | String | 主题(默认是"theme-green"绿色),还有"theme-blue"蓝色。你可以在jquery.range.less中设置 |
| isRange | 可选 | Boolean | 是否为范围(默认false,选择一个点),如果是true，选择的是范围,格式为'1,2' |
| snap | 可选 | Boolean | 是否只允许按增值选择(默认false) |
| disable | 可选 | Boolean | 是否只读(默认false),若为true,只读模式，无法选择。可以用js动态设置$('.slider').jRange('disable'); $('.slider').jRange('enable'); $('.slider').jRange('toggleDisable'); |
| onstatechange | 可选 | Function | 数字变化的时候的回调函数 |
| ondragend | 可选 | Function | 拖动结束时的回调函数 |
| onbarclicked | 可选 | Function | 刻度条被按住时的回调函数 |
另外,选择器的值也可以通过js来动态修改:
改变选中的范围:$('.slider').jRange('setValue', '10,20');
改变可选的范围:$('.slider').jRange('updateRange', '0,100');
第二个参数是刻度，或者当前值
$('.slider').jRange('updateRange', '0,100', '25,50');
$('.slider').jRange('updateRange', '0,100', 25);
网友评论