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() {}当滑块的值被用户改变是执行，被改变的值依然会赋值给隐藏的标签。