jquery-range-picker

<script type="text/javascript" src="http://sandbox.runjs.cn/js/sandbox/jquery/jquery-1.7.2.min.js"></script>
<!-- 下面两个库用来提供 drag 事件支持，也可自行替换为支持 drag 的其他库  -->
<script type="text/javascript" src="jquery.event.drag-2.2.js"></script>
<script type="text/javascript" src="jquery.event.drag.live-2.2.js"></script>
<!-- jquery range picker 库  -->
<script type="text/javascript" src="jquery.range-pikcer.js"></script>

<span class="daisy-range-picker"></span>

<script type="text/javascript">
	$(function(){
		picker = $(".daisy-range-picker").range_picker({
        	//是否显示分割线
			show_seperator:false,
            //是否启用动画
		 	animate:false,
            //初始化开始区间值
			from:2,
            //初始化结束区间值
			to:5,
            //选取块宽度
			picker_width:14,
            //各区间值
			ranges:[1,2,3,4,5,6,7],
			onChange:function(from_to){
				$(".msg").html(from_to[0]+'~'+from_to[1]);
			},
			onSelect:function(index,from_to){
				$(".msg").html(from_to[0]+'~'+from_to[1]);
			},
			afterInit:function(){
				var picker = this;
				var ranges = picker.options.ranges;
				$(".msg").html(ranges[0]+'~'+ranges[ranges.length-1]);
			}
		});
	});
</script>

onSelect:function(index,from_to){
	var self = this;
	var from = from_to[0];
	var to = from_to[1];
}