一、range范围选择
-
基本使用示意
基于HTML5
type="range"区域选择框实现的range选择组件。透明度：
<span>透明度：</span><input type="range" id="opacityRange" class="ui-range-input" value="50" min="0" max="100" step="10">
$("#opacityRange").change(function() { $(this).siblings('span').css('opacity', this.value / 100); }).range({ tips: function(value) { return value + '%'; } });range选择的最大值小值由原生的
min和max属性控制，每次选择的范围由step属性控制。三个属性都可以缺省，
min默认为0，max默认为100，step默认是1。 -
语法
new Range(el, options);
el只能是单个DOM jQuery包装器对象，如果你想多个range元素同时自定义化，可以使用jQuery链式调用。
$().range(options);
当你拖选范围的时候，如果区域变化，会自动触发原生range
input的change事件，因此，我们只要关系原生的选择控件本身就可以了。options可选参数只有一个，就是tips。参数名称 支持类型 默认值 释义 reverse Boolean false 黑色tips是否朝下显示。默认朝上，设置为 true则朝下显示。tips Function|Null {
tips: function(value) {
return value;
}
}如果 tips是Function，则按住圈圈拖动的时候，会将其返回的值作为黑色tips的内容显示。其中，上下文this指的是input元素，支持一个参数，为当前的值。如果tips为null, 则表示不显示黑色tips。本组件依赖tips组件。
-
深入应用
如果使用构造器语法，如下：
var myRange = new Range($('#range'));则myRange就是返回的实例对象。
如果使用的jQuery的包装器语法，如下：
$('#range').range();则实例对象这么获取：
var myRange = $('#range').data('range');myRange暴露的属性和方法如下：
{ value: function () {}, position: function () {} }当我们需要通过JS来改变滑块值和位置的时候，就可以使用实例暴露的
value()方法。例如：
HTML代码和JS代码如下：
<p><input type="range" id="rangeRange" min="1" max="100"></p> <button id="rangeButton">改变值（随机）</button>
var elRange = $('#rangeRange').range(); var myRange = elRange.data('range'); $('#rangeButton').on('click', function () {// 调用实例myRange暴露的value方法改变range input的值和滑块位置 myRange.value(Math.ceil(100 * Math.random())); });
二、作为插件独立使用
引入如下CSS和JS：
<link rel="stylesheet" href="//qidian.gtimg.com/lulu/theme/peak/css/common/ui/Tips.css"> <link rel="stylesheet" href="//qidian.gtimg.com/lulu/theme/peak/css/common/ui/Range.css">
<script src="//qidian.gtimg.com/lulu/theme/peak/js/common/ui/Follow.js"></script> <script src="//qidian.gtimg.com/lulu/theme/peak/js/common/ui/Tips.js"></script> <script src="//qidian.gtimg.com/lulu/theme/peak/js/common/ui/Range.js"></script>
或者引入合并的资源：
<link rel="stylesheet" href="//qidian.gtimg.com/c/=/lulu/theme/peak/css/common/ui/Tips.css,/lulu/theme/peak/css/common/ui/Range.css">
<script src="//qidian.gtimg.com/c/=/lulu/theme/peak/js/common/ui/Follow.js,/lulu/theme/peak/js/common/ui/Tips.js,/lulu/theme/peak/js/common/ui/Range.js"></script>