jQuery+jRange实现滑动选取数值范围特效
更新时间：2015年03月14日 14:51:26 投稿：hebedich
本文向大家介绍一款范围选择器插件jRange，它是基于jQuery的一款简单插件。本站之前有类似文章：jQuery+CSS使用滑块选取价格范围，其中不太好的地方是使用了jqueryui庞大的插件库，有兴趣的朋友可以看看。下面我们来看下插件jRange的使用。
有时我们在页面上需要选择数值范围，如购物时选取价格区间，购买主机时自主选取CPU，内存大小配置等，使用直观的滑块条直接选取想要的数值大小即可，无需手动输入数值，操作简单又方便。
HTML
首先载入jQuery库文件以及jRange相关的css文件：jquery.range.css和插件：jquery.range.js
复制代码 代码如下:
<script src="jquery.js"></script>
<link rel="stylesheet" href="jquery.range.css">
<script src="jquery.range.js"></script>
然后在需要展示滑块选择器的位置放入以下代码：
复制代码 代码如下:
<input type="hidden" class="slider-input" value="23" />
我们使用了hiiden类型的文本域，设置默认值value，如23。
jQuery
调用jRange插件非常简单，直接用下面的代码：
复制代码 代码如下:
$('.single-slider').jRange({
from: 0,
to: 100,
step: 1,
scale: [0,25,50,75,100],
format: '%s',
width: 300,
showLabels: true,
showScale: true
});
然后运行你的网页，你将看到DEMO中的效果。
选项设置
插件jRange也提供了一些必要的选项设置来满足各种需求。
| 选项 | 说明 | 默认值 |
| from | 滑动范围的最小值，数字，如0 | |
| to | 滑动范围的最大值，数字，如100 | |
| step | 步长值，每次滑动大小 | 1 |
| scale | 滑动条下方的尺度标签，数组类型，如[0,50,100] | [from,to] |
| showLabels | 布尔型，是否显示滑动条下方的尺寸标签 | true |
| showScale | 布尔型，是否显示滑块上方的数值标签 | true |
| format | 数值格式 | "%s" |
| width | 滑动条宽度 | 300 |
| isRange | 是否为选取范围。 | false |
更多信息请参阅jRange项目官网：https://github.com/nitinhayaran/jRange
以上就是本文的全部内容了，有需要的小伙伴参考下，希望大家能够喜欢。
相关文章
jQuery 是一个非常优秀的 JavaScript 框架，在现在的 Web 开发项目中扮演着重要角色。jQuery 使用简单灵活，同时还有许多成熟的插件可供选择，它可以帮助你在项目中加入一些非常好的效果，让网站有更好的可用性和用户体验2011-12-12
现在任何事务都追求效率和人性化，当然网页效果也是如此，如果一个可以编辑数据的表格，编辑到最后一行的时候，点击可以自动添加一行，这样算是一个比较人性化的效果，可以免去一丝劳顿之苦，下面分享一段这样的代码2016-01-01
TimergliderJS 一个基于jQuery的时间轴插件
Timeglider JS是一个由javascript支持缩放，数据驱动的时间轴组件。非常适合显示项目历史，项目计划及其其它需要显示历史的项目2011-12-12
这篇文章主要介绍了jQuery层级选择器用法,实例分析了常见的四种层级选择器的使用技巧,并给出了实例总结,需要的朋友可以参考下2015-02-02
用户输入一个表单，输入准考证和验证码，验证用户是否输入表单，点击查询提交，然后从服务器得到返回的数据并显示出来2012-09-09
这篇文章主要介绍了jquery实现动态菜单的实例代码。需要的朋友可以过来参考下，希望对大家有所帮助2013-11-11
有时候，需要屏蔽一个div中所有的input类型，使用jquery很简单有效的完成。2009-10-10
在网页上只有一个小区域，但是说明性的文字又很长，下面这段脚本实现的是长文字的部分显示，有类似需求的朋友可以参考下哈，希望对你有所帮助2013-05-05
完美解决jQuery符号$与其他javascript 库、框架冲突的问题
下面小编就为大家带来一篇完美解决jQuery符号$与其他javascript 库、框架冲突的问题。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2016-08-08
导航条背景切换的效果，想必大家在浏览网页时可能会碰到过，下面为大家介绍下使用jquery如何实现，具体思路及代码如下，感兴趣的朋友可以参考下2013-09-09
最新评论