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插件HighCharts绘制2D金字塔图效果示例【附demo源码下载】
这篇文章主要介绍了jQuery插件HighCharts绘制2D金字塔图效果,结合实例形式分析了jQuery使用HighCharts插件绘制金字塔图效果的操作步骤与相关实现技巧,并附带demo源码供读者下载参考,需要的朋友可以参考下2017-03-03
这篇文章主要介绍了jQuery中bind()方法用法,实例分析了bind()方法的功能、定义及为匹配元素的特定事件绑定事件处理方法的技巧,需要的朋友可以参考下2015-01-01
复制节点也是常用的DOM操作之一，例如很多购物网站的效果,本文将介绍jQuery移动和复制dom节点等实用DOM操作，有需的朋友可以参考下2012-12-12
下面小编就为大家带来一篇jquery基本选择器匹配多个元素的实现方法。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2016-09-09
之前脚本之家发布多个获取url参数的函数，这里是jquery的，比较适合已经使用了jquery库的朋友使用。2010-03-03
这篇文章主要为大家详细介绍了jQuery实现简单计算器，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-07-07
jQuery Timelinr实现垂直水平时间轴插件(附源码下载)
jquery.timelinr.js是一款效果非常炫酷的jQuery时间轴插件。下面脚本之家小编给大家介绍jQuery Timelinr实现垂直水平时间轴插件，需要的朋友参考下2016-02-02
jQuery实现的Tab滑动选项卡及图片切换(多种效果)小结
这篇文章主要介绍了jQuery实现的Tab滑动选项卡及图片切换效果小结,实例总结了几种常见的tab切换效果,包括鼠标点击切换、滑过切换、定时自动切换等,非常具有实用价值,需要的朋友可以参考下2015-09-09
jQuery插件slick实现响应式移动端幻灯片图片切换特效
jQuery插件slick是一款响应式、适用于移动设备触摸屏、可滑动显示的jQuery幻灯片插件。该幻灯片插件可以设置多种显示效果，可以自动播放，是一款移动优先的jQuery幻灯片插件。2015-04-04
这篇文章主要为大家详细介绍了jQuery+PHP+Mysql实现抽奖程序，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-05-05
最新评论