jQuery插件jRange滑动选取数值范围---使用心得

Posted 2020-09-23

最近做商城的时候，需要做选择价格区间的这么一个功能，为了让选择更加直观，更加灵活；在网上搜索到了一款不错的插件，一款jQuery插件jRange：

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

该插件使用起来也比较简单（而且官网也有详细说明）：

首先引入两个文件：<link rel="stylesheet" type="text/css" href="css/jquery.range.css">

                         <script type="text/javascript" src="js/jquery.range.js"></script>（当然还有jquery-1.11.3.min.js，毕竟该插件是以jquery开发的）

 

html部分代码：<input type="hidden" id="range" class="slider-input" value="3000" />

js部分：      

$(‘.slider-input‘).jRange({
from: 0,
to: 10000,
step: 1,
format: ‘%s‘+‘元‘,
width: 240,
showLabels: true,
isRange : true
});

以上就是引用过程，就是这么简单！

下面是选项配置（图片来自于http://www.jb51.net/article/62235.htm）：

上面的一些选项配置可以满足需求，不过，漏了一个我觉得比较重要配置上面没写出来（虽然官网也有介绍），那就是：onstatechange选项，该选项就是说每当用户更改值时，这个函数就会被调用。同样的值也会自动为所提供的隐藏输入设置。对于单个滑块值没有逗号，但对于范围选择器值是逗号分隔的。

以上就是我要分享的全部内容！！！