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的值。

音量:
点击值变成20
音量:
30%
  •                                             <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.rangeSliderGithub

另外本框架根据插件说明自制了皮肤,修改了原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.cssax.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
                                                    });
                                                    }
                                            

双滑块联动

以下演示双滑块的实例。更多单滑块的实例请参加原插件官网

单个联动:
单个联动:
设定280
两个联动:
两个联动:
~
设定300-400
  •                                             <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>
                            

监听事件

借鉴jQuery的写法,本插件有若干监听方法,格式是:instance.on('event',function(){});具体事件说明如下:

  • destroy 销毁实例时执行
  • reset 重置后执行
  • updated 参数更新后执行

演示实例使用console方法,请用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//更新后回调
                                });
                                });
                            

操作方法

名称 说明 参数说明 回调函数
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(){}
无参数
axInstance(axRanges, name) 获取实例并重新设定参数 axRanges是当页创建的所有实例;name是指插件元素axRange属性的name值 无回调函数
在回调函数中this均指向实例本身,所以在回调函数中可默认使用如下变量:
  • this:实例本身
  • this.targetDom:实例的Dom
  • this.options:实例的参数