v3首页
v2首页
核心
实例
资源
关于
v1.0

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%
JS HTML 
  •                                             <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-plain" 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">

插件滑块

本滑块插件大大的丰富了原生range表单控件的功能，可以：

  • 以input节点初始化或者div等节点初始化
  • 支持使用增减按钮实现递增和递减
  • 支持实时显示滑动结果
  • 支持使用方向键控制递增和递减
  • 支持显示刻度尺，并支持两级刻度
  • 在min和max基础上支持二级限制活动范围
  • 支持禁用和再次启用
  • 支持显示气泡指示
  • 支持自定义大刻度文本内容
  • 支持点击轨道进行定位
  • 支持双手柄显示区间值
  • 支持拖动双手柄的区间轨道进行等值平移
  • 支持点击min、max气泡，和大刻度文本进行定位
  • 支持自定义刻度等分数量，包括二级刻度等分数量
  • 支持水平和垂直方向展示滑块

使用方法

插件运行方式有两种：

  • ax*属性：对input标签或其他标签使用axRange属性即可按默认参数运行插件。
  • js实例：通过new axRange('#ID')方式创建实例运行。

如果以input标签创建实例，那么应该给input写上name属性；如果不在input上设置name，那么也需要在插件参数name里设置。

属性使用：
JS使用：
HTML 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');

单滑块

默认不显示刻度尺，可通过ruler.enable:true开启；用户可以通过ruler.labels自定义刻度文本，labels的length值需要与大刻度线数量相等。

开启刻度尺之后可以使用fence范围限制，options.fence值是一个length=2的数组，如果两个值一致表示不使用fence功能，如果不一致表示除了min和max限制之外还要加上fence限制。

默认不显示增减按钮，可通过button.enable:true开启。

默认不实时显示结果，可通过result.enable:true显示结果，结果文本格式可通过result.format设定。

加刻度：
自定义刻度值：
带限制：
带按钮：
显示结果：
设置极限值：
                                <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" value="41" axRange='ruler:{enable: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" value="41" axRange='ruler:{enable:true,labels:["很差","还好","中等","不错","很好"]}'></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" value="41" axRange='ruler:{enable:true},fence:[20,80]'></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" value="41" axRange='button:{enable: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" value="41" axRange='result:{enable: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" value="340" axRange='min:200,max:500'></div>
                                        </div>
                                    </div>
                                </div>

                                <div class="ax-break-md"></div>
                                <div class="ax-break-md"></div>
                                <div class="ax-break-md"></div>

双滑块联动

通过设定参数multiple:true即可使用双滑块。双滑块相比单滑块有些许不同的地方：

  • 1、能在中间滑块上拖动以实现等距平移
  • 2、点击两个滑块两侧的滑轨可实现等距平移
  • 3、如果已经指定multiple为false，则要求value是一个数值，即使value不是数值也会强制转成一个数值（值保留value数组第一个值）
  • 4、可使用locked参数，将两个滑块的相对距离固定住，一同挪动

关于value和multiple的转换关系有几种情况需要注意：

  • 1、如果value值是数组，并且multiple为false，则会强制将multiple转为true，以双滑块呈现
  • 2、如果value是单值，并且multiple为true，则将value强制转成数组（以max值补充）
双滑块：
带限制：
带按钮：
带锁定：
                                <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" value="41,80" axRange='multiple:true'></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" value="20,50" axRange='multiple:true,fence:[10,80],ruler:{enable: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" value="20,50" axRange='multiple:true,button:{enable:true}'></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" value="20,50" axRange='multiple:true,button:{enable:true},locked:true'></div>
                                        </div>
                                    </div>
                                </div>


                                <div class="ax-break-md"></div>
                                <div class="ax-break-md"></div>
                                <div class="ax-break-md"></div>

禁用

使用参数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" value="41" axRange='disabled:true'></div>
                                </div>
                                </div>
                                </div>

自定义刻度

刻度分大刻度和小刻度，ruler.majorEqual表示大刻度几等分，默认为4等分，即有5个刻度值；ruler.minorEqual表示小刻度几等分，默认根据大刻度间距自动等分，可通过该参数自定义小刻度等分。

自定义刻度：
                                <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" value="41" axRange='ruler:{enable:true,majorEqual:3,minorEqual:10}'></div>
                                </div>
                                </div>
                                </div>

键盘支持

如果需要微调滑块值，可将options.keyboard设为true即可通过键盘上的方向键精确控制滑块位置，up和right键表示增加，down和left键表示减少。

参数options.step是增减的最小步进值，默认为1，可自由设定。

需要注意的是，虽然开启了键盘支持，但是还需要让整个滑块成为焦点才可使用键盘事件，即至少点击一次滑块。

键盘支持：
                                    <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" value="41" axRange='button:{enable:true},keyboard:true'></div>
                                            </div>
                                        </div>
                                    </div>

垂直方向

滑块默认是水平的，可通过options.axis参数设为y使之变为垂直滑动，类似水位计和温度计形态。

                                    <div class="ax-row">
                                        <div class="ax-col">
                                            <div axRange='axis:"y"'></div>
                                        </div>
                                        <div class="ax-col">
                                            <div axRange='axis:"y",button:{enable:true},ruler:{enable:true},result:{enable:true}'></div>
                                        </div>
                                        <div class="ax-col">
                                            <div axRange='axis:"y",multiple:true,value:[30,60],button:{enable:true}'></div>
                                        </div>
                                    </div>

变量和操作方法

本插件有系列内部成员变量和内部操作方法，用户根据这些变量和方法可以自由操作实例，据此可方便与其他组件进行交互。请按下F12按键打开浏览器控制台来观摩以下实例。

内部成员变量如下：

  • this.targetDom：创建实例的目标节点
  • this.wrapperDom：滑块主体容器节点，不包含inputDom
  • this.inputDom：表单控件的input节点
  • this.mainDom：滑块主体容器节点，不包含resultDom
  • this.increaseDom：递增按钮节点
  • this.decreaseDom：递减按钮节点
  • this.trackDom：轨道节点
  • this.baseDom：轨道基面节点（灰色）
  • this.thumbDom：轨道滑轨节点（彩色）
  • this.resultDom：显示结果的节点
  • this.bubbleDom：存放气泡的节点
  • this.handleDom：存放滑块的节点
  • this.rulerDom：标尺节点
  • this.fenceDom：限制滑轨节点
  • this.tickDom：存放刻度的节点
  • this.handles：所有滑块的节点数组，包含from，to，single
  • this.bubbles：所有气泡的节点数组，包含min、max、from、to、sigle和merge
  • this.ticks：所有大刻度的节点数组
  • this.rawValue：初始值，使用reset方法会启用该值
  • this.initialValue：修正后的初始值，如果multiple为tre则为数组
  • this.output：实例的实时输出值，是一个对象，包含属性有：
    • value：输出滑块代表值，如果multiple为tre则输出数组
    • ratio：输出滑块所在轨道比例，如果multiple为tre则输出数组
  • this.rangeValues：真实区间值，根据min、max和fence参数修正而来，包含min和max属性
  • this.size：相对固定的尺寸值合集，包含属性有：
    • handle：滑块尺寸，单位px
    • track：轨道尺寸，单位px
    • ruler：标尺尺寸，单位px
    • bubble：气泡尺寸对象，包含min、max、from、to、single
    • ratio：滑块所在位置比例，小数，包含radius（滑块半径占轨道比例）、min（可取的最小值占轨道比例）、max（可取的最大值占轨道比例）和full（取options.max值时占轨道比例）
  • this.destroyed：销毁状态

内部操作方法如下：

  • this.setValues(value,callback)：设置值，支持两个参数：
    • value：将要设置的值，可以是一个数值，也可以是一个数组，应该在[min,max]范围内或fence范围内
    • callback：回调函数，支持一个参数，该参数也是this.output变量
  • this.getValues()：获取当前值，即获取this.output变量，无参数
  • this.toMax(callback)：滑到最大值，支持回调函数，回调支持一个参数即当前值
  • this.toMin(callback)：滑到最小值，支持回调函数，回调支持一个参数即当前值
  • this.disable(callback)：禁用插件，支持回调函数，回调无参数
  • this.enable(callback)：重新启用插件，支持回调函数，回调无参数
  • this.reset(callback)：回到初始值，支持回调函数，回调无参数
  • this.update(setting,callback)：更新参数，支持回调函数，回调支持一个参数即刚设置的参数
  • this.destroy(callback)：销毁实例，支持回调函数，回调无参数
  • this.save(setting,callback)：保存参数到本地（基于localstorage），参数说明如下：
    • setting：保存的参数，支持两种格式：
      • 为空，将保持当前active、disabled和content的状态
      • 对象格式，比如setting={active:1,diabled:3}
    • callback：回调函数，支持一个参数即localstorage值：
变量和方法：
HTML JS 
  •                                             <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" id="method"></div>
                                                    </div>
                                                </div>
                                            </div>
        
        
                                            <div class="ax-break-md"></div>
                                            <div class="ax-break-md"></div>
                                            <div class="ax-break-md"></div>
        
                                            <button class="ax-btn" id="set">设置60</button>
                                            <button class="ax-btn" id="get">获取值</button>
                                            <button class="ax-btn" id="max">到最大</button>
                                            <button class="ax-btn" id="min">到最小</button>
                                            <button class="ax-btn" id="disable">禁用</button>
                                            <button class="ax-btn" id="enable">启用</button>
                                            <button class="ax-btn" id="revert">还原</button>
                                            <button class="ax-btn" id="var">获取变量</button>

                                        
  •                                             let mIns = new axRange('#method', {
                                                value: 41,
                                            }),
                                                setBtn = document.querySelector('#set'),
                                                getBtn = document.querySelector('#get'),
                                                maxBtn = document.querySelector('#max'),
                                                minBtn = document.querySelector('#min'),
                                                disableBtn = document.querySelector('#disable'),
                                                enableBtn = document.querySelector('#enable'),
                                                revertBtn = document.querySelector('#revert'),
                                                varBtn = document.querySelector('#var');
                                
                                            setBtn.onclick = () => {
                                                mIns.setValues(60);
                                            }
                                            getBtn.onclick = () => {
                                                console.log('当前输出值：',mIns.getValues())
                                            }
                                            maxBtn.onclick = () => {
                                                mIns.toMax();
                                            }
                                            minBtn.onclick = () => {
                                                mIns.toMin();
                                            }
                                            resetBtn.onclick = () => {
                                                mIns.reset();
                                            }
                                            disableBtn.onclick = () => {
                                                mIns.disable();
                                            }
                                            enableBtn.onclick = () => {
                                                mIns.enable();
                                            }
                                            varBtn.onclick = () => {
                                                console.log('this.size：',mIns.size);
                                                console.log('this.rangeValues：',mIns.rangeValues);
                                                console.log('this.output：',mIns.output);
                                                console.log('this.initialValue：',mIns.initialValue);
                                                console.log('this.rawValue：',mIns.rawValue);
                                
                                                console.log('this.ticks：',mIns.ticks);
                                                console.log('this.bubbles：',mIns.bubbles);
                                                console.log('this.handles：',mIns.handles);
                                            }

监听事件

本插件有若干监听方法，以on为关键字，参数中监听格式为：new instance({onShow:function(){}})；实例后监听格式是：instance.on('show',function(){})。在参数中监听和实例后监听效果相同。具体事件说明如下：

  • onInit/init 初始化后执行，支持回调函数，回调无参数
  • onSet/set 设置值后执行，支持回调函数，回调支持一个参数即当前输出值
  • onToMin/toMin 返回最小值后执行，支持回调函数，回调支持一个参数即当前值
  • onToMax/toMax 返回最大值后执行，支持回调函数，回调支持一个参数即当前值
  • onDisable/disable 禁用后执行，支持回调函数，回调无参数
  • onEnable/enable 启用后执行，支持回调函数，回调无参数
  • onDestroy/destroy 销毁实例后执行，支持回调函数，回调无参数
  • onReset/reset 重置后执行，支持回调函数，回调无参数
  • onUpdate/update 参数更新后执行，支持回调函数，回调有一个参数即赋予的新参数
  • onSave/save 保存当前设定后执行，支持回调函数，回调无参数

演示实例显示结果使用了console.log方法，请按下F12按键打开开发者工具中的“控制台”查看监听效果。

监听：
HTML JS 
  •                                     <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" id="on"></div>
                                            </div>
                                        </div>
                                    </div>


                                    <div class="ax-break-md"></div>
                                    <div class="ax-break-md"></div>
                                    <div class="ax-break-md"></div>

                                    <button id="update" class="ax-btn">更新</button>
                                    <button id="reset" class="ax-btn">重置</button>
                                    <button id="destroy" class="ax-btn">摧毁</button>
                                    <button id="init" class="ax-btn">初始化</button>
                                        
  •                                             let onIns = new axRange('#on', {
                                                value: 41,
                                            }),
                                                updateBtn = document.querySelector('#update'),
                                                resetBtn = document.querySelector('#reset'),
                                                destroyBtn = document.querySelector('#destroy'),
                                                initBtn = document.querySelector('#init');
                                
                                            updateBtn.onclick = () => {
                                                onIns.update({
                                                    ruler: {
                                                        enable: true,
                                                    },
                                                    button: {
                                                        enable: true,
                                                    },
                                                    min: -50,
                                                    max: 200,
                                                });
                                            }
                                            resetBtn.onclick = () => {
                                                onIns.reset()
                                            }
                                            destroyBtn.onclick = () => {
                                                onIns.destroy();
                                            }
                                            initBtn.onclick = () => {
                                                onIns.init();
                                            }
                                            onIns.on('set', (output) => {
                                                console.log('当前输出值：', output)
                                            }).on('update', (setting) => {
                                                console.log('更新参数：', setting)
                                            }).on('destroy', (setting) => {
                                                console.log('已销毁，请重新初始化')
                                            }).on('init', (setting) => {
                                                console.log('已重新初始化')
                                            });

保存数据

因为主动或被动关闭了浏览器导致对实例的操作未结束，使用保存数据功能可在重新打开浏览器之后恢复关闭之前的状态，此状态包括active状态、disabled状态、内容增减状态以及其他参数状态（视插件而定）。

保存数据功能是基于this.save方法实现的，如果需要使用自动保存功能则需要填写storageName参数并确保该参数在当页localstorage存储中是唯一的。

使用axLocalStorage.get方法来查看保存的数据，关于axLocalStorage用法可点击这里。

保存数据：
                                <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="storageName:'demo'"></div>
                                        </div>
                                    </div>
                                </div>

参数选项

                                document.addEventListener("DOMContentLoaded", function() {
                                    var demo1 = new axRange('ID',{
                                        insName: '',//实例名称，字符串格式；如果填写了实例名称，那么该实例会被添加到实例合集当中，通过axInstance方法可获取本实例，详细请查看：ax-utils-instance.php
                                        storageName: '',//存储名称，字符串格式；如果需要保存实例当前数据请设定唯一的值，比如：storageName:'mystorage001'
                                        name: '',//input控件的name，如果需要真实提交表单请务必填写
                                        step: 1,//步进，滑块值变化的最小单位
                                        max: 100,//最大值，默认为100，可为任意大于min的数值
                                        min: 0,//最小值，默认为0，可为任意小于max的数值
                                        value: 0,//初始值，默认为0，如果multiple为true则需要填写数组，例如[0,60]
                                        multiple: false,//是否允许两个滑块自由滑动来设定区间，默认false即一个滑块
                                        locked: false,//如果multiple为true，是否锁定from和to间距，默认false不锁定
                                        limitShow: true,//是否头尾显示极限值气泡（min和max），默认true显示
                                        tipShow: true,//是否显示滑块气泡，默认true显示
                                        result: {
                                            enable: false,//是否回显结果，默认false不显示，可选择true显示
                                            format: `<#this.value#>`,//展示内容格式，<#this.value#>用于显示值，可自由组合文本内容
                                        },
                                        fence: [0, 0],//滑块的移动范围，数组的两个值相同表示不作限制
                                        button: {
                                            enable: false,
                                            step: 1,
                                            decrease: '',
                                            increase: '',
                                        },
                                        classes: '',//追加样式，多个样式类可用英文逗号或空格隔开
                                        keyboard: false,//是否可以使用键盘方向键代替增减按钮，默认false
                                        separator: ',',//input值的分隔符，默认英文逗号
                                        hyphen: '~',//当multiple为ture且两个滑块靠近时的气泡值连接符
                                        ruler: {
                                            enable: false,//是否显示标尺，默认false不显示
                                            majorEqual: 4,//大刻度等分数量，默认4等分，可自由填写某一正整数
                                            minorEqual: 'auto',//小刻度等分数量，默认为auto即自动计算获得小刻度，可自由填写某一正整数，填0或1则不显示
                                            labels: [],//大刻度的下标，数组形式，为空则自动计算数值，可自由填写，数组的length需要等于majorEqual+1
                                        },
                                        axis: 'x',//滑块移动坐标轴，默认x即横向移动，可选择y纵向移动
                                        disabled: false,//是否禁用，默认false不禁用
                                        onInit: '',//回调函数，初始化后执行，无参数
                                        onSet: '',//回调函数，设置新值后执行，支持一个参数即当前的输出值（包含value和ratio）
                                        onToMin: '',//回调函数，返回最小值后执行，支持一个参数即回调函数，回调有一个参数即当前值
                                        onToMax: '',//回调函数，返回最大值后执行，支持一个参数即回调函数，回调有一个参数即当前值
                                        onReset: '',//回调函数，重置后执行，支持一个参数即回调函数，回调无参数
                                        onEnable: '',//回调函数，启用后执行，支持一个参数即回调函数，回调无参数
                                        onDisable: '',//回调函数，禁用后执行，支持一个参数即回调函数，回调无参数
                                        onUpdate: '',//回调函数，参数更新后执行，支持一个参数即赋予的新参数
                                        onDestroy: '',//回调函数，销毁后执行，无参数
                                        onSave: '',//回调函数，保存数据后执行，支持一个参数即localstorage值
                                    });
                                });
以axMenu插件为例，如果在元素上通过ax*使用属性，需要使用类似json的写法，属性不需要使用引号，如果值是字符串需要使用引号包裹，如果值是数字、布尔值、null或undefined不需要引号；比如要设置active，那么在元素的ax*属性中应该这样书写：axMenu="active:2"