Range 滑块
使用方法
input默认的range类型在各浏览器下形态各异，本框架借助css统一了外观(chrome无法美化进度部分，用户需另写JS控制)，可跟普通表单混用。
音量：
音量：
<div class="ax-form-group">
<div class="ax-flex-row">
<div class="ax-form-label">音量：</div>
<div class="ax-form-con">
<div class="ax-form-input"><input type="range"></div>
</div>
</div>
</div>
<div class="ax-break-md"></div>
<div class="ax-form-group">
<div class="ax-flex-row">
<div class="ax-form-label">音量：</div>
<div class="ax-form-con">
<div class="ax-form-input"><input type="range" disabled></div>
</div>
</div>
</div>
通过简单js可控制range游标变化，或在页面输出range的值。
音量：
-
<script type='text/javascript'> $(document).ready(function () { $('#volBtn').click(function () { $('#volInput').val("20"); }); $('#volOutput').bind('input propertychange', function() { $('#volVal').html($(this).val() + '%'); }); }); </script> -
<div class="ax-form-group"> <div class="ax-flex-row"> <div class="ax-form-label">音量：</div> <div class="ax-form-con"> <div class="ax-form-input"><input type="range" id="volInput"></div> </div> <a href="###" class="ax-form-btn ax-btn ax-text" id="volBtn">点击值变成20</a> </div> </div> <div class="ax-break-md"></div> <div class="ax-form-group"> <div class="ax-flex-row"> <div class="ax-form-label">音量：</div> <div class="ax-form-con"> <div class="ax-form-input"><input type="range" value="30" id="volOutput"></div> </div> <span class="ax-form-txt ax-color-ignore" id="volVal">30%</span> </div> </div>
range跟其他表单控件一样支持多个尺寸，默认是ax-md（高38px），其他可用ax-xs（高22px），ax-sm（高28px）和ax-lg（高48px）。
音量xs：
音量sm：
音量lg：
<div class="ax-form-group ax-xs">
<div class="ax-flex-row">
<div class="ax-form-label">音量xs：</div>
<div class="ax-form-con">
<div class="ax-form-input"><input type="range"></div>
</div>
</div>
</div>
<div class="ax-break-md"></div>
<div class="ax-form-group ax-sm">
<div class="ax-flex-row">
<div class="ax-form-label">音量sm：</div>
<div class="ax-form-con">
<div class="ax-form-input"><input type="range"></div>
</div>
</div>
</div>
<div class="ax-break-md"></div>
<div class="ax-form-group ax-lg">
<div class="ax-flex-row">
<div class="ax-form-label">音量lg：</div>
<div class="ax-form-con">
<div class="ax-form-input"><input type="range"></div>
</div>
</div>
</div>
<div class="ax-break-md"></div>
<input type="range" class="ax-xs">
<input type="range" class="ax-sm">
<input type="range" class="ax-lg">
插件滑块
本滑块插件是在原第三方插件ion.rangeSlider的v2.3.1版本基础上改造而来，去掉了jQuery依赖。该插件在Github很受欢迎，使用简单直接，参数全面，能满足绝大多数场景需求，API和具体使用方法见其官网ion.rangeSlider或Github。
另外本框架根据插件说明自制了皮肤，修改了原css，参见演示效果。
- 重构了插件，剔除jQuery依赖，并按ax插件风格对插件进行了格式化
- 清理了ion的相关css，替换为ax风格的css样式写法
- skin参数改成className参数，并默认为空
- ionRangeSlider插件名改成axRange
- 将参数下划线分割改成大写驼峰分割，比如from_min改成了fromMin
- 修改了监听方式
- toFixed和fromFixed参数改名为toStick和fromStick，避免与toFixed函数混淆
- prettifyEnabled参数默认设为false，也就是不使用千分位 disabled
- 强迫症犯了，把disable参数改成disabled
- 去掉了extra_class参数，如果需要自定义样式，使用className参数便可
运行条件
页面引入ax.css和ax.js之后还需再追加引用以下文件：
<script src="
https://src.axui.cn/v2.0/src/plugins/range/range.min.js" type="text/javascript"></script>
使用方法
插件运行方式有两种：
- ax*属性：对input标签使用
axRange属性即可按默认参数运行插件。 - js实例：通过
new axRange('#ID')方式创建实例运行。
属性使用：
JS使用：
-
<div class="ax-form-group"> <div class="ax-flex-row"> <div class="ax-form-label">属性使用：</div> <div class="ax-form-con"> <div class="ax-form-input"><input name="username" axRange value="41"></div> </div> </div> </div> <div class="ax-form-group"> <div class="ax-flex-row"> <div class="ax-form-label">JS使用：</div> <div class="ax-form-con"> <div class="ax-form-input"><input name="username" id="dft" value="41"></div> </div> </div> </div> -
new axRange('#dft');
单滑块
以下演示单滑块的实例。更多单滑块的实例请参加原插件官网。
加刻度：
加限制：
两个：
-
<div class="ax-form-group"> <div class="ax-flex-row"> <div class="ax-form-label">加刻度：</div> <div class="ax-form-con"> <div class="ax-form-input"><input name="username" axRange='grid:true'></div> </div> </div> </div> <div class="ax-break-md"></div> <div class="ax-break-md"></div> <div class="ax-break-md"></div> <div class="ax-form-group"> <div class="ax-flex-row"> <div class="ax-form-label">加限制：</div> <div class="ax-form-con"> <div class="ax-form-input"><input name="username" axRange='min:0,max:1000,from:500,grid:true,fromMin:"250",fromMax:600,fromShadow:true'></div> </div> </div> </div> <div class="ax-break-md"></div> <div class="ax-break-md"></div> <div class="ax-break-md"></div> <div class="ax-form-group"> <div class="ax-flex-row"> <div class="ax-form-label">两个：</div> <div class="ax-form-con"> <div class="ax-form-input"><input name="username" axRange='type:"double",min:0,max:1000,from:400,to:600,dragInterval:true'></div> </div> </div> </div> -
//单个联动使用 let sliderSinputfrom = document.querySelector("#slider05-from"), sliderSmin = 0, sliderSmax = 1000, sliderSfrom = 0; let sliderS = axRange('#slider05', { skin: "ax", min: sliderSmin, max: sliderSmax, from: 500, onStart: updateS, onChange: updateS }); function updateS(data) { from = data.from; sliderSinputfrom.value = from; } sliderSinputfrom.addEventListener('input', function() { var val = this.value; if (val < sliderSmin || val==sliderSmin) { val=sliderSmin; } else if (val> sliderSmax || val == sliderSmax) { val = sliderSmax; } sliderS.update({ from: val }); }); document.querySelector('#sliderSbtn').onclick = function() { var val = this.getAttribute('data-from'); sliderSinputfrom.value = val; sliderS.update({ from: val }); }
双滑块联动
以下演示双滑块的实例。更多单滑块的实例请参加原插件官网。
-
<div class="ax-form-group"> <div class="ax-flex-row"> <div class="ax-form-label">单个联动：</div> <div class="ax-form-con"> <div class="ax-form-input"><input name="username" placeholder="输入登录名称" id="slider05" value="41" type="text"></div> </div> </div> </div> <div class="ax-break-md"></div> <div class="ax-break-md"></div> <div class="ax-form-group"> <div class="ax-flex-row"> <div class="ax-form-label">单个联动：</div> <div class="ax-form-con"> <div class="ax-form-input"><input name="username" placeholder="输入登录名称" id="slider05-from" value="" type="text"></div> </div> <a href="###" class="ax-form-btn ax-btn" id="sliderSbtn" data-from="280">设定280</a> </div> </div> <div class="ax-break-md"></div> <div class="ax-break-md"></div> <div class="ax-break-md"></div> <div class="ax-form-group"> <div class="ax-flex-row"> <div class="ax-form-label">两个联动：</div> <div class="ax-form-con"> <div class="ax-form-input"><input name="username" placeholder="输入登录名称" id="slider06" type="text"></div> </div> </div> </div> <div class="ax-break-md"></div> <div class="ax-break-md"></div> <div class="ax-form-group"> <div class="ax-flex-row"> <div class="ax-form-label">两个联动：</div> <div class="ax-form-con"> <div class="ax-form-input"> <div class="ax-row"> <div class="ax-col ax-col-8"><input name="username" placeholder="最小" value="" id="slider06-from" type="text"></div> <span class="ax-bunch-txt">~</span> <div class="ax-col ax-col-8"><input name="username" placeholder="最大" value="" id="slider06-to" type="text"></div> </div> </div> </div> <a href="###" class="ax-form-btn ax-btn" id="sliderDbtn" data-from="300" data-to="400">设定300-400</a> </div> </div> -
//两个range联动使用 var sliderDinputfrom = document.querySelector("#slider06-from"), sliderDinputto = document.querySelector("#slider06-to"), sliderDmin = 0, sliderDmax = 1000, sliderDfrom = 0, sliderDto = 0; let sliderD = axRange('#slider06', { skin: "ax", type: "double", min: sliderDmin, max: sliderDmax, from: 100, to: 800, onStart: updateD, onChange: updateD }); function updateD(data) { from = data.from; to = data.to; sliderDinputfrom.value = from; sliderDinputto.value = to; } sliderDinputfrom.addEventListener('input', function() { var val = this.value; if (val < sliderDmin || val==sliderDmin) { val=sliderDmin; } else if (val> sliderDmax || val == sliderDmax) { val = sliderDmax; } sliderD.update({ from: val }); }); sliderDinputto.addEventListener('input', function() { var val = this.value; if (val < sliderDfrom) { val=sliderDfrom; } else if (val> sliderDmax) { val = sliderDmax; } sliderD.update({ to: val }); }); document.querySelector("#sliderDbtn").onclick = function() { var valfrom = this.getAttribute('data-from'); var valto = this.getAttribute('data-to'); sliderDinputfrom.value = valfrom; sliderDinputto.value = valto; sliderD.update({ from: valfrom, to: valto }); };
禁用
使用参数disabled:true即可禁用。
禁用：
<div class="ax-form-group">
<div class="ax-flex-row">
<div class="ax-form-label">禁用：</div>
<div class="ax-form-con">
<div class="ax-form-input"><input name="username" axRange='disabled:true'></div>
</div>
</div>
</div>
监听事件
本插件有若干监听方法，以on为关键字，实例后监听和在参数中监听效果相同。格式是：instance.on('event',function(){})；具体事件说明如下：
destroy销毁实例时执行reset重置后执行updated参数更新后执行
演示实例显示结果使用了console.log方法，请按下F12按键打开开发者工具中的“控制台”查看监听效果。
监听：
-
<div class="ax-form-group"> <div class="ax-flex-row"> <div class="ax-form-label">监听：</div> <div class="ax-form-con"> <div class="ax-form-input"><input name="username" id="instance"></div> </div> </div> </div> <button id="update" class="ax-btn">更新</button> <button id="reset" class="ax-btn">重置</button> <button id="destroy" class="ax-btn">摧毁</button> -
//监听 let instance = new axRange('#instance', { min: 0, max: 100, grid: true, fromMin: 25, fromMax: 75, fromShadow: true, }); document.querySelector('#update').onclick = function() { instance.update({ max: 80, }) } document.querySelector('#destroy').onclick = function() { instance.destroy(); } document.querySelector('#reset').onclick = function() { instance.reset(); } instance.on('updated', function() { console.log('更新了参数！'); }).on('reset', function() { console.log('重置了实例！'); }).on('destroy', function() { console.log('销毁了实例！'); })
参数选项
document.addEventListener("DOMContentLoaded", function() {
var demo1 = new axRange('ID',{
className: "",//追加类名
type: "single",//类型，默认单手柄，可选择double双手柄
min: 0,//轨道最小值
max: 100,//轨道最大值
from: null,//加载后从哪个值开始
to: null,//加载后从哪个值结束（对双手柄中的右手柄有效）
step: 1,//步进
minInterval: 0,//锁定手柄后的起点和终点间隔的最小值
maxInterval: 0,//锁定手柄后的起点和终点间隔的最大值
dragInterval: false,//锁定双手柄后可拖拽
values: [],//轨道刻度值
pValues: [],//备用值
fromStick: false,//加载后，是否固定起始值手柄
fromMin: null,//加载后，起始手柄允许的最小值
fromMax: null,//加载后，起始手柄允许的最大值
fromShadow: false,//是否显示起始手柄范围指示线
toStick: false,//加载后，是否固定终点值手柄
toMin: null,//加载后，终点手柄允许的最小值
toMax: null,//加载后，终点手柄允许的最小值
toShadow: false,//是否显示终点手柄范围指示线
prettifyEnabled: false,//是否显示千分位
prettifySeparator: " ",//设置千分位字符
prettify: null,//使用函数自定义分隔符
forceEdges: false,//是否锁定在区域内，不外溢
keyboard: true,//是否允许键盘的上下左右键控制滑块
grid: false,//是否使用刻度
gridMargin: true,//刻度左右两侧间距，如果是false那么与手柄不完美对齐
gridNum: 4,//刻度等分为几份
gridSnap: false,//是否按等分步进
hideLabelTrack: false,//是否隐藏轨道起止标签
hideLabelSlider: false,//是否隐藏起止手柄的标签
prefix: "",//前缀符号
postfix: "",//后缀符号
maxPostfix: "",//最大值的后缀符号
decorateBoth: true,//是否自动出现连接符，对双手柄有效
valuesSeparator: " — ",//手柄相连后的连接符，对双手柄有效
inputValuesSeparator: ";",//Input中值的分隔符，对双手柄有效
disabled: false,//是否禁用
block: false,//是否锁定，（不禁用）
scope: null,
onStart: null,//加载完成回调
onChange: null,//值改变后回调
onFinish: null,//完成操作后回调
onUpdate: null//更新后回调
});
});
以axMenu插件为例，如果在元素上通过ax*使用属性，需要使用类似json的写法，属性不需要使用引号，如果值是字符串需要使用引号包裹，如果值是数字、布尔值、null或undefined不需要引号；比如要设置active，那么在元素的ax*属性中应该这样书写：axMenu="active:2"
操作方法
| 名称 | 说明 | 参数说明 | 回调函数 |
|---|---|---|---|
| init() | 初始化 | 无参数 | 无回调函数 |
| update(setting, callback) | 更新所有参数 | setting是用户自定义参数，是一个对象；callback是回调函数，可不填 | function(){} 无参数 |
| destroy(callback) | 销毁实例 | callback是回调函数，可不填 | function(){} 无参数 |
| on(type, handler) | 添加监听事件 | type是监听事件，事件类型可看前文的：监听方法；handler是回调函数 | function(index){} index：当前li的索引，可不填 |
| off(type, handler) | 取消监听事件 | type是监听事件，事件类型可看前文的：监听方法；handler是回调函数 | function(){} 无参数 |
在回调函数中this均指向实例本身，所以在回调函数中可默认使用如下变量：
- this：实例本身
- this.targetDom：实例的Dom
- this.options：实例的参数