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" placeholder="输入登录名称" id="slider01" value="41" type="text"></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" placeholder="输入登录名称" id="slider02" type="text"></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" placeholder="输入登录名称" id="slider03" type="text"></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" placeholder="输入登录名称" id="slider04" type="text"></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即可禁用。

禁用:

监听事件

借鉴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//更新后回调
      });
});
                        

1、如果同时设置了index和cookie,那么会自动取消cookie设定。

2、本插件支持data-*属性方式使用参数。如果在插件元素上通过data-*属性方式使用参数,参数层级使用短横区分,比如要设置student:{name:'',school:''}中的name参数,那么在插件元素的data属性中应该这样书写:data-student-name="Lily"。

操作方法

名称 说明 参数说明 回调函数
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:实例的参数