插件描述：jQuery左右滑动效果选取数值是一款范围选择器插件jRange，购物时选取价格区间，购买主机时自主选取CPU，内存大小配置等经常用到的。
jQuery左右滑动效果选取数值是一款范围选择器插件jRange
购物时选取价格区间，购买主机时自主选取CPU，内存大小配置等经常用到的。
1、引入js和css以及jquery
<script type="text/javascript" src="jquery.min.js"></script> <link rel="stylesheet" href="jquery.range.css"> <script src="jquery.range.js"></script>
2、html添加input表单
<input type="hidden" class="single-slider" value="23" /> <button id="g1">获取值</button>
3、html加入js
<script>
$(function(){
$('.single-slider').jRange({
from: 0,//开始于
to: 100,//结束于
step: 1,//一次滑动多少
scale: [0,25,50,75,100],//分割点
format: '%s',//格式化格式
width: 300,//宽度
showLabels: true,
showScale: true
});
$('.range-slider').jRange({
from: 0,
to: 100,
step: 1,
scale: [0,25,50,75,100],
format: '%s',
width: 300,
showLabels: true,
isRange : true//是否显示区间
});
$("#g1").click(function(){
var aa = $(".single-slider").val();
alert(aa);
});
});
</script>
PREVIOUS:
NEXT:
相关插件-拖和放,滑块和旋转
jQuery拖拽拖放插件DAD
DAD 是一款基于 jQuery 的拖拽拖放插件，它支持常见的水平拖放、垂直拖放、多行拖放、指定拖放区域、回调函数、允许禁止拖放等等，同时你也可以稍加改造，做成类似垃圾篓、购物车等效果。
拖和放
讨论这个项目（82）回答他人问题或分享插件使用方法奖励jQ币 评论用户自律公约
ikaros 0
2018/4/28 11:58:08
-
这个插件支持修改为时间节点的拖动吗？ 精确到分
ikaros0
2018/4/28 11:59:45
-
还有修改to的值 默认选中区域的位置乱了
😃
- 😀
- 😉
- 😥
- 😵
- 😫
- 😘
- 😡
- 👍
- 🌹
- 👏
- 🍺
- 🍉
- 🌙
- ⭐
- 💖
- 💔
😃
取消回复
- 😀
- 😉
- 😥
- 😵
- 😫
- 😘
- 😡
- 👍
- 🌹
- 👏
- 🍺
- 🍉
- 🌙
- ⭐
- 💖
- 💔
