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

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

小川 特效组件
郑重声明:
  本站发布的内容仅限用于学习和研究目的.请勿用于商业或非法用途,否则后果请用户自负,下载后请24小时内删除。 本站所有内容均不能保证其完整性,不提供任何技术支持,不能接受请勿购买或下载,如需完整程序,请去其官方购买正版使用。
查看演示   下载源码  
【温馨提示】源码包解压密码:www.youhutong.com

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



 浏览器启用弹出窗口过滤功能,将无法跳转到下载页。在浏览器地址栏右边符号提示处点击允许就可以了!
查看演示   下载源码  
【温馨提示】源码包解压密码:www.youhutong.com

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


  1、本站发布的内容仅限用于学习和研究目的.请勿用于商业或非法用途,下载后请24小时内删除。
  2、本站所有内容均不能保证其完整性,不能接受请勿购买或下载,如需完整程序,请去其官方购买正版使用
  3、本站联系方式Email:admin@youhutong.com ,收到邮件会第一时间处理。
  4、如侵犯到任何版权问题,请立即告知本站(立即在线告知),本站将及时删除并致以最深的歉意
( 2 )个小伙伴在吐槽
    登录帐号  如果已经登录请刷新! 发表我的评论
    表情