jRange使用心得（动态修改滑块的值）

最近的项目中需要使用到滑块去选择范围区间，手写的话，项目时间来不及，所以就在网上查了下，发现基于jQuery的插件jRange还不错，话不多说，以下是我的一些使用心得，欢迎交流学习！

jRange官网地址                      Github地址

使用步骤非常的简单：

1.将样式文件jRange.css和脚本文件jRange.js下载到本地，然后倒入到需要使用的项目中：

<link rel="stylesheet" type="text/css" href="public/jRange/jRange.css">

<script type="text/javascript" src="public/js/jquery-1.10.1.min.js">  

（值得一提的就是大家需要注意，该插件基于jQuery，所以记得先导入jQuery）

<script type="text/javascript" src="public/jRange/jRange.js"></script>

2.导入上述文件之后，然后将固定样式的input放入需要展示的地方：

<input type="hidden" class="slider-input" value="0,10"/>

然后加入一段初始化的js即可：

$('.slider-input').jRange({

    from:0,//最小值

    to:10,//最大值

    step:1,//每次的增量

    scale: ["0","2","4","6","8","不限"],//刻度条

    showLabels:false,//显示标签

    showScale:true,//显示刻度

    format:'%s',//设置标签格式

    width:$(window).width()*0.86,//宽度

    theme:"theme-blue",//主题(默认是"theme-green"绿色),还有"theme-blue"蓝色。你可以在jquery.range.less中设置

    isRange:true,//是否为范围(默认false,选择一个点),如果是true，选择的是范围,格式为'1,2'

    snap:false,//是否只允许按增值选择(默认false)

    disable:false,//是否只读(默认false),若为true,只读模式，无法选择。可以用js动态设置$('.slider').jRange('disable'); $('.slider').jRange('enable'); $('.slider').jRange('toggleDisable');

    onstatechange:function () {//数字变化的时候的回调函数

    },

    ondragend:function () {//拖动结束时的回调函数

},

onbarclicked:function () {//刻度条被按住时的回调函数

}

});

可能大家看这个代码会觉得有点烦躁，没事儿，下面直接上属性截图，会更加直观和清晰：

需要什么可以直接在初始化里面去设置

宽度的设置一般会是默认值300px，这里为了适应手机屏幕，做了自适应的处理；

isRange属性，当设置为false的时候，只需将HTML部分的input的Value更改为 "X,Y"模式即可，如需重置或者动态更改input的值，则需要调用到jRange封装到的方法：$('.slider-input').jRange('setValue','0,10');

如图所示

该方法可以实时更新input的值和，滑块的表现出来的值。

3.最后一点，设计稿的滑块一般都会和默认的滑块样式有比较大的出入，这时我们只需要按照设计稿更改下载到本地的样式文件即可。

以上就是我要分享的一点心得，后期有更加深入的理解，会继续更新。谢谢大家！