jQuery滑动选取数值范围

使用jRange插件实现滑动选取数值范围，相关网址：https://github.com/nitinhayaran/jRange/

基本使用

1.引用文件：jquery.min.js jquery.range.js jquery.range.css

<script type="text/javascript" src="js/jquery-1.8.0.js"></script>
<link rel="stylesheet" href="css/jquery.range.css">
<script src="js/jquery.range.js"></script>

2.在html中需要展示滑块的位置放入

隐藏的input标签，

在value中设置默认值。

<div>
<div class="demo">
<input type="hidden" class="range-slider" value="20,30"/>
<input id="g2" type="button" value="获取刻度值">
</div>
</div>

3.选中隐藏的标签调用jRange()方法并设置初始化值，如

$('.range-slider').jRange({
from: 0, // 开始于
to: 100, // 结束于
step: 1, // 一次滑动多少
scale: [0,25,50,75,100],  // 分割点
format: '%s',  // 格式化格式
width: 300, // 宽度
showLabels: true, // 是否显示滑动条下方的尺寸标签
showScale: true,  // 是否显示滑块上方的数值标签
isRange:true  // 是否选取范围
});

来调用jRange插件。

这是基本的用法，效果如下图

ie10、ie11效果图：



ie9效果图：



ie8效果图：



ie6效果图：



隐藏的jRange插件会自动将滑块选择的值传入input标签，我们获取input的值就可以了，基本操作在此就不赘述。

样式

插件提供的有2个样式：theme-blue和theme-green，默认的是theme-green，可以通过theme: 'theme-green'来设置。我们也可以自定义样式。我们对theme-green的主题做出如下

.slider-container .back-bar .pointer-label {  /*设置上标尺的字体大小，背景色，位置*/
position: absolute;
top:-17px;
font-size: 12px;
background: #ffffff;
white-space: nowrap;
line-height: 1;
}

.slider-container .scale ins { /*设置下标尺的字体大小，背景色，位置*/
font-size: 12px;
text-decoration: none;
position: absolute;
left: 0;
top: 5px;
color: #999;
line-height: 1;
}

.theme-green .back-bar { /*滚动条设置*/
height: 1px; /*滚动条的高度*/
border-radius: 2px;
background-color: #eeeeee;
background-color: #e7e7e7;
background-color: #0080ff;
background-image: -moz-linear-gradient(top, #eeeeee, #dddddd);
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#eeeeee), to(#dddddd));
background-image: -webkit-linear-gradient(top, #eeeeee, #dddddd);
background-image: -o-linear-gradient(top, #eeeeee, #dddddd);
background-image: linear-gradient(to bottom, #0080ff, #0080ff); /*滚动条未被选中部分的颜色*/
background-repeat: repeat-x;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffeeeeee', endColorstr='#ffdddddd', GradientType=0);
}

.theme-green .back-bar .selected-bar { /*被选中的滚动条*/
border-radius: 2px;
background-color: #a1fad0;
background-image: -moz-linear-gradient(top, #bdfade, #76fabc);
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#bdfade), to(#76fabc));
background-image: -webkit-linear-gradient(top, #bdfade, #76fabc);
background-image: -o-linear-gradient(top, #bdfade, #76fabc);
background-image: linear-gradient(to bottom, #ff0080, #ff0080); /*设置被选中部分的滚动条的颜色*/
background-repeat: repeat-x;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffbdfade', endColorstr='#ff76fabc', GradientType=0);
}

.theme-green .back-bar .pointer { /*滑块设置*/
width: 5px;
height: 5px;
top: -2px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
border-radius: 10px;
border: 1px solid #0000a0;
background-color: #e7e7e7;
background-image: -moz-linear-gradient(top, #eeeeee, #dddddd);
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#eeeeee), to(#dddddd));
background-image: -webkit-linear-gradient(top, #eeeeee, #dddddd);
background-image: -o-linear-gradient(top, #eeeeee, #dddddd);
background-image: linear-gradient(to bottom, #0000a0, #8000ff); /*渐变色*/
background-repeat: repeat-x;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffeeeeee', endColorstr='#ffdddddd', GradientType=0);
}

.theme-green .back-bar .pointer-label { /*上标尺颜色*/
color: #0080ff;
}

.theme-green .scale span { /*滑条下方刻度样式设置*/
border-left: 	1px solid #e5e5e5;
}

.theme-green .scale ins { /*下标尺颜色*/
color: #0080ff;
}

修改之后的效果图：

option

format的默认值为%s,jRange框架会将format值的%s部分用滑块的数值替代，剩余部分不变如format:%smin,将会显示onstatechange: function() {},


onstatechange: function() {}当滑块的值被用户改变是执行，被改变的值依然会赋值给隐藏的标签。