1.   阿里云服务器1888元代金券领取
  2.   本网站所有源码包解压密码:www.youhutong.com
登录  帮助问答

jQuery滑动选取数值范围插件jRange(jquery.range.js)

小川 特效组件
查看演示  

jQuery滑动选取数值范围插件jRange(jquery.range.js)

2222.png


1、HTML部分:

    1》首先载入jQuery库文件以及jRange相关的css文件和插件文件(jquery.range.css和jquery.range.js插件文件)

<link rel="stylesheet" href="jquery.range.css">
<script src="http://www.youhutong.com/static/js/jquery.js"></script>
<script src="jquery.range.js"></script>

    2》然后在需要展示滑块选择器的位置放入以下代码:

<input type="hidden" class="range-slider"  value="25,75"/>

 我们使用了hiiden类型的文本域,设置默认值value,如23。


2、JS部分:

调用jRange插件,直接用下面的代码:

$('.range-slider').jRange({
	from: 0,
	to: 100,
	step: 1,
	scale: [0,25,50,75,100],
	format: '%s',
	width: 300,
	showLabels: true,
	isRange : true
});

然后运行就可以看到效果了!


选项设置

插件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



 浏览器启用弹出窗口过滤功能,将无法跳转到下载页。在浏览器地址栏右边符号提示处点击允许就可以了!
查看演示  

转载请注明来源地址:小川编程 » https://www.youhutong.com/index.php/article/index/89.html

( 2 )个小伙伴在吐槽
    登录帐号  如果已经登录请刷新! 发表我的评论
    表情