From 21a25629dd0c2dd84cfa701fdeb78941a9537666 Mon Sep 17 00:00:00 2001
From: morning-star <26325820+Sight-wcg@users.noreply.github.com>
Date: Mon, 8 Sep 2025 23:04:59 +0800
Subject: [PATCH] =?UTF-8?q?refactor(slider):=20=E4=BD=BF=E7=94=A8=20compon?=
 =?UTF-8?q?ent=20=E9=87=8D=E6=9E=84=20slider=20(#2781)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* refactor(slider): 使用 component 重构 slider

* docs(slider): 添加 component 通用接口说明

---------

Co-authored-by: 贤心 <3277200+sentsim@users.noreply.github.com>
---
 docs/slider/index.md  |  13 +-
 src/modules/slider.js | 521 +++++++++++++++++++-----------------------
 2 files changed, 239 insertions(+), 295 deletions(-)

diff --git a/docs/slider/index.md b/docs/slider/index.md
index 061098fb..42e102e6 100644
--- a/docs/slider/index.md
+++ b/docs/slider/index.md
@@ -2,7 +2,7 @@
 title: 滑块组件 slider
 toc: true
 ---
- 
+
 # 滑块组件
 
 > 滑块组件 `slider` 是一个拖拽选值的交互性组件，常与 `form` 元素结合使用。
@@ -22,6 +22,7 @@ toc: true
 | API | 描述 |
 | --- | --- |
 | var slider = layui.slider | 获得 `slider` 模块。 |
+| [基础接口](../component/#export) <sup>2.12+</sup> | 该组件由 `component` 构建，因此继承其提供的基础接口。|
 | [var inst = slider.render(options)](#render) | slider 组件渲染，核心方法。 |
 | [inst.setValue(value)](#setValue) | 设置滑块值 |
 | inst.config | 获得当前实例的属性选项 |
@@ -37,7 +38,7 @@ toc: true
 <div id="ID-test-slider"></div>
 <div class="class-test-slider" lay-options="{value: 50}"></div>
 <div class="class-test-slider" lay-options="{value: 80}"></div>
- 
+
 <!-- import layui -->
 <script>
 layui.use(function(){
@@ -71,16 +72,16 @@ console.log(inst); // 得到当前实例对象
 
 ```
 var slider = layui.slider;
- 
+
 // 渲染
 var inst = slider.render({
   elem: '#id'
   // …
-});      
- 
+});
+
 // 设置滑块值
 inst.setValue(20);
- 
+
 // 若滑块开启了范围，即： `range: true`
 ins1.setValue(20, 0) // 设置开始值
 ins1.setValue(60, 1) // 设置结尾值
diff --git a/src/modules/slider.js b/src/modules/slider.js
index a95ccbfe..97d55b53 100644
--- a/src/modules/slider.js
+++ b/src/modules/slider.js
@@ -2,83 +2,228 @@
  * slider 滑块组件
  */
 
-layui.define(['jquery', 'lay'], function(exports) {
+layui.define(['component', 'jquery', 'lay'], function(exports) {
   'use strict';
 
   var $ = layui.$;
   var lay = layui.lay;
 
-  // 外部接口
-  var slider = {
-    config: {},
-    index: layui.slider ? (layui.slider.index + 10000) : 0,
-
-    // 设置全局项
-    set: function(options) {
-      var that = this;
-      that.config = $.extend({}, that.config, options);
-      return that;
+  var component = layui.component({
+    name: 'slider',
+    config: {
+      type: 'default', //滑块类型，垂直：vertical
+      min: 0, //最小值
+      max: 100, //最大值，默认100
+      value: 0, //初始值，默认为0
+      step: 1, //间隔值
+      showstep: false, //间隔点开启
+      tips: true, //文字提示，开启
+      tipsAlways: false, //文字提示，始终开启
+      input: false, //输入框，关闭
+      range: false, //范围选择，与输入框不能同时开启，默认关闭
+      height: 200, //配合 type:"vertical" 使用，默认200px
+      disabled: false, //滑块禁用，默认关闭
+      theme: '#16baaa' //主题颜色
     },
+    CONST: {
+      ELEM_VIEW: 'layui-slider',
+      SLIDER_BAR: 'layui-slider-bar',
+      SLIDER_WRAP: 'layui-slider-wrap',
+      SLIDER_WRAP_BTN: 'layui-slider-wrap-btn',
+      SLIDER_TIPS: 'layui-slider-tips',
+      SLIDER_INPUT: 'layui-slider-input',
+      SLIDER_INPUT_TXT: 'layui-slider-input-txt',
+      SLIDER_INPUT_BTN: 'layui-slider-input-btn',
+      ELEM_HOVER: 'layui-slider-hover',
+    },
+    render: function (rerender) {
+      var that = this;
+      var options = that.config;
 
-    // 事件
-    on: function(events, callback) {
-      return layui.onevent.call(this, MOD_NAME, events, callback);
+      //间隔值不能小于等于 0
+      if (options.step <= 0) options.step = 1;
+
+      //最大值不能小于最小值
+      if (options.max < options.min) options.max = options.min + options.step;
+
+      //判断是否开启双滑块
+      if (options.range) {
+        options.value = typeof (options.value) == 'object' ? options.value : [options.min, options.value];
+        var minValue = Math.min(options.value[0], options.value[1])
+          , maxValue = Math.max(options.value[0], options.value[1]);
+        options.value[0] = Math.max(minValue, options.min);
+        options.value[1] = Math.max(maxValue, options.min);
+        options.value[0] = Math.min(options.value[0], options.max);
+        options.value[1] = Math.min(options.value[1], options.max);
+
+        var scaleFir = (options.value[0] - options.min) / (options.max - options.min) * 100;
+        var scaleSec = (options.value[1] - options.min) / (options.max - options.min) * 100;
+        var scale = scaleSec - scaleFir + '%';
+        scaleFir = scaleFir + '%';
+        scaleSec = scaleSec + '%';
+      } else {
+        //如果初始值是一个数组，则获取数组的最小值
+        if (typeof options.value == 'object') {
+          options.value = Math.min.apply(null, options.value);
+        }
+
+        //初始值不能小于最小值且不能大于最大值
+        if (options.value < options.min) options.value = options.min;
+        if (options.value > options.max) options.value = options.max;
+
+        var scale = (options.value - options.min) / (options.max - options.min) * 100 + '%';
+      }
+
+
+      //如果禁用，颜色为统一的灰色
+      var theme = options.disabled ? '#c2c2c2' : options.theme;
+
+      //滑块
+      var temp = '<div class="layui-slider ' + (options.type === 'vertical' ? 'layui-slider-vertical' : '') + '">' + (options.tips ? '<div class="' + CONST.SLIDER_TIPS + '" ' + (options.tipsAlways ? '' : 'style="display:none;"') + '></div>' : '') +
+        '<div class="layui-slider-bar" style="background:' + theme + '; ' + (options.type === 'vertical' ? 'height' : 'width') + ':' + scale + ';' + (options.type === 'vertical' ? 'bottom' : 'left') + ':' + (scaleFir || 0) + ';"></div><div class="layui-slider-wrap" style="' + (options.type === 'vertical' ? 'bottom' : 'left') + ':' + (scaleFir || scale) + ';">' +
+        '<div class="layui-slider-wrap-btn" style="border: 2px solid ' + theme + ';"></div></div>' + (options.range ? '<div class="layui-slider-wrap" style="' + (options.type === 'vertical' ? 'bottom' : 'left') + ':' + scaleSec + ';"><div class="layui-slider-wrap-btn" style="border: 2px solid ' + theme + ';"></div></div>' : '') + '</div>';
+
+      var othis = $(options.elem);
+      var hasRender = othis.next('.' + CONST.ELEM_VIEW);
+      //生成替代元素
+      hasRender[0] && hasRender.remove(); //如果已经渲染，则Rerender
+      that.elemTemp = $(temp);
+
+      //把数据缓存到滑块上
+      if (options.range) {
+        that.elemTemp.find('.' + CONST.SLIDER_WRAP).eq(0).data('value', options.value[0]);
+        that.elemTemp.find('.' + CONST.SLIDER_WRAP).eq(1).data('value', options.value[1]);
+      } else {
+        that.elemTemp.find('.' + CONST.SLIDER_WRAP).data('value', options.value);
+      }
+
+      //插入替代元素
+      othis.html(that.elemTemp);
+
+      //垂直滑块
+      if (options.type === 'vertical') {
+        that.elemTemp.height(options.height + 'px');
+      }
+
+      //显示间断点
+      if (options.showstep) {
+        var number = (options.max - options.min) / options.step, item = '';
+        for (var i = 1; i < number + 1; i++) {
+          var step = i * 100 / number;
+          if (step < 100) {
+            item += '<div class="layui-slider-step" style="' + (options.type === 'vertical' ? 'bottom' : 'left') + ':' + step + '%"></div>'
+          }
+        }
+        that.elemTemp.append(item);
+      }
+
+      //插入输入框
+      if (options.input && !options.range) {
+        var elemInput = $('<div class="layui-slider-input"><div class="layui-slider-input-txt"><input type="text" class="layui-input"></div><div class="layui-slider-input-btn"><i class="layui-icon layui-icon-up"></i><i class="layui-icon layui-icon-down"></i></div></div>');
+        othis.css("position", "relative");
+        othis.append(elemInput);
+        othis.find('.' + CONST.SLIDER_INPUT_TXT).children('input').val(options.value);
+        if (options.type === 'vertical') {
+          elemInput.css({
+            left: 0
+            , top: -48
+          });
+        } else {
+          that.elemTemp.css("margin-right", elemInput.outerWidth() + 15);
+        }
+      }
+
+      //给未禁止的滑块滑动事件
+      if (!options.disabled) {
+        that.slide();
+      } else {
+        that.elemTemp.addClass(CONST.CLASS_DISABLED);
+        that.elemTemp.find('.' + CONST.SLIDER_WRAP_BTN).addClass(CONST.CLASS_DISABLED);
+      }
+
+      /**
+       * @description 设置提示文本内容
+       * @param {Element} sliderWrapBtnElem 提示文本节点元素
+       */
+      function setSliderTipsTxt(sliderWrapBtnElem) {
+        var value = sliderWrapBtnElem.parent().data('value');
+        var tipsTxt = options.setTips ? options.setTips(value) : value;
+        that.elemTemp.find('.' + CONST.SLIDER_TIPS).html(tipsTxt);
+      }
+
+      /**
+       * @description 计算提示文本元素的 position left
+       * @param {Element} sliderWrapBtnElem 提示文本节点元素
+       */
+      function calcSliderTipsLeft(sliderWrapBtnElem) {
+        var sliderWidth = options.type === 'vertical' ? options.height : that.elemTemp[0].offsetWidth;
+        var sliderWrap = that.elemTemp.find('.' + CONST.SLIDER_WRAP);
+        var tipsLeft = options.type === 'vertical' ? (sliderWidth - sliderWrapBtnElem.parent()[0].offsetTop - sliderWrap.height()) : sliderWrapBtnElem.parent()[0].offsetLeft;
+        var left = tipsLeft / sliderWidth * 100;
+        return left
+      }
+
+      /**
+       * @description 设置提示文本元素的 position left
+       * @param {number} left 要设置的 left 的大小
+       */
+      function setSliderTipsLeft(left) {
+        if (options.type === 'vertical') {
+          that.elemTemp.find('.' + CONST.SLIDER_TIPS).css({
+            "bottom": left + '%',
+            "margin-bottom": "20px",
+            "display": "inline-block"
+          });
+        } else {
+          that.elemTemp.find('.' + CONST.SLIDER_TIPS).css({
+            "left": left + '%',
+            "display": "inline-block"
+          });
+        }
+      }
+
+      //判断是否要始终显示提示文本
+      if (options.tips) {
+        if (options.tipsAlways) {
+          var sliderWrapBtnElem = that.elemTemp.find('.' + CONST.SLIDER_WRAP_BTN);
+          setSliderTipsTxt(sliderWrapBtnElem)
+          var left = calcSliderTipsLeft(sliderWrapBtnElem);
+          setSliderTipsLeft(left)
+        } else {
+          //划过滑块显示数值
+          var timer;
+          that.elemTemp.find('.' + CONST.SLIDER_WRAP_BTN).on('mouseover', function () {
+            setSliderTipsTxt($(this))
+            var left = calcSliderTipsLeft($(this));
+            clearTimeout(timer);
+            timer = setTimeout(function () {
+              setSliderTipsLeft(left)
+            }, 300);
+          }).on('mouseout', function () {
+            clearTimeout(timer);
+            if (!options.tipsAlways) {
+              that.elemTemp.find('.' + CONST.SLIDER_TIPS).css("display", "none");
+            }
+          });
+        }
+      }
+    },
+    extendsInstance: function(){
+      var that = this;
+      var options = that.config;
+      return {
+        setValue: function (value, index) {
+          value = value > options.max ? options.max : value;
+          value = value < options.min ? options.min : value;
+          options.value = value;
+          return that.slide('set', value, index || 0);
+        }
+      };
     }
-  };
+  });
 
-  // 操作当前实例
-  var thisSlider = function(){
-    var that = this;
-    var options = that.config;
-
-    return {
-      setValue: function(value, index){ // 设置值
-        value = value > options.max ? options.max : value;
-        value = value < options.min ? options.min : value;
-        options.value = value;
-        return that.slide('set', value, index || 0);
-      },
-      config: options
-    }
-  };
-
-  // 字符常量
-  var MOD_NAME = 'slider';
-  var DISABLED = 'layui-disabled';
-  var ELEM_VIEW = 'layui-slider';
-  var SLIDER_BAR = 'layui-slider-bar';
-  var SLIDER_WRAP = 'layui-slider-wrap';
-  var SLIDER_WRAP_BTN = 'layui-slider-wrap-btn';
-  var SLIDER_TIPS = 'layui-slider-tips';
-  var SLIDER_INPUT = 'layui-slider-input';
-  var SLIDER_INPUT_TXT = 'layui-slider-input-txt';
-  var SLIDER_INPUT_BTN = 'layui-slider-input-btn';
-  var ELEM_HOVER = 'layui-slider-hover';
-
-  // 构造器
-  var Class = function(options){
-    var that = this;
-    that.index = ++slider.index;
-    that.config = $.extend({}, that.config, slider.config, options);
-    that.render();
-  };
-
-  // 默认配置
-  Class.prototype.config = {
-    type: 'default', //滑块类型，垂直：vertical
-    min: 0, //最小值
-    max: 100, //最大值，默认100
-    value: 0, //初始值，默认为0
-    step: 1, //间隔值
-    showstep: false, //间隔点开启
-    tips: true, //文字提示，开启
-    tipsAlways: false, //文字提示，始终开启
-    input: false, //输入框，关闭
-    range: false, //范围选择，与输入框不能同时开启，默认关闭
-    height: 200, //配合 type:"vertical" 使用，默认200px
-    disabled: false, //滑块禁用，默认关闭
-    theme: '#16baaa' //主题颜色
-  };
+  var CONST = component.CONST;
+  var Class = component.Class;
 
   // 数值精度
   Class.prototype.precision = function(){
@@ -91,196 +236,6 @@ layui.define(['jquery', 'lay'], function(exports) {
     return Math.max.apply(null, precisions);
   }
 
-  //滑块渲染
-  Class.prototype.render = function(){
-    var that = this;
-    var options = that.config;
-
-    // 若 elem 非唯一，则拆分为多个实例
-    var elem = $(options.elem);
-    if(elem.length > 1){
-      layui.each(elem, function(){
-        slider.render($.extend({}, options, {
-          elem: this
-        }));
-      });
-      return that;
-    }
-
-    // 合并 lay-options 属性上的配置信息
-    $.extend(options, lay.options(elem[0]));
-
-    //间隔值不能小于等于 0
-    if(options.step <= 0) options.step = 1;
-
-    //最大值不能小于最小值
-    if(options.max < options.min) options.max = options.min + options.step;
-
-
-
-    //判断是否开启双滑块
-    if(options.range){
-      options.value = typeof(options.value) == 'object' ? options.value : [options.min, options.value];
-      var minValue = Math.min(options.value[0], options.value[1])
-      ,maxValue = Math.max(options.value[0], options.value[1]);
-      options.value[0] = Math.max(minValue,options.min);
-      options.value[1] = Math.max(maxValue,options.min);
-      options.value[0] = Math.min(options.value[0],options.max);
-      options.value[1] = Math.min(options.value[1],options.max);
-
-      var scaleFir = (options.value[0] - options.min) / (options.max - options.min) * 100;
-      var scaleSec = (options.value[1] - options.min) / (options.max - options.min) * 100;
-      var scale = scaleSec - scaleFir + '%';
-      scaleFir = scaleFir + '%';
-      scaleSec = scaleSec + '%';
-    } else {
-      //如果初始值是一个数组，则获取数组的最小值
-      if(typeof options.value == 'object'){
-        options.value = Math.min.apply(null, options.value);
-      }
-
-      //初始值不能小于最小值且不能大于最大值
-      if(options.value < options.min) options.value = options.min;
-      if(options.value > options.max) options.value = options.max;
-
-      var scale = (options.value - options.min) / (options.max - options.min) * 100 + '%';
-    }
-
-
-    //如果禁用，颜色为统一的灰色
-    var theme = options.disabled ? '#c2c2c2' : options.theme;
-
-    //滑块
-    var temp = '<div class="layui-slider '+ (options.type === 'vertical' ? 'layui-slider-vertical' : '') +'">'+ (options.tips ? '<div class="'+ SLIDER_TIPS +'" '+ (options.tipsAlways ? '' : 'style="display:none;"') +'></div>' : '') +
-    '<div class="layui-slider-bar" style="background:'+ theme +'; '+ (options.type === 'vertical' ? 'height' : 'width') +':'+ scale +';'+ (options.type === 'vertical' ? 'bottom' : 'left') +':'+ (scaleFir || 0) +';"></div><div class="layui-slider-wrap" style="'+ (options.type === 'vertical' ? 'bottom' : 'left') +':'+ (scaleFir || scale) +';">' +
-    '<div class="layui-slider-wrap-btn" style="border: 2px solid '+ theme +';"></div></div>'+ (options.range ? '<div class="layui-slider-wrap" style="'+ (options.type === 'vertical' ? 'bottom' : 'left') +':'+ scaleSec +';"><div class="layui-slider-wrap-btn" style="border: 2px solid '+ theme +';"></div></div>' : '') +'</div>';
-
-    var othis = $(options.elem);
-    var hasRender = othis.next('.' + ELEM_VIEW);
-    //生成替代元素
-    hasRender[0] && hasRender.remove(); //如果已经渲染，则Rerender
-    that.elemTemp = $(temp);
-
-    //把数据缓存到滑块上
-    if(options.range){
-      that.elemTemp.find('.' + SLIDER_WRAP).eq(0).data('value', options.value[0]);
-      that.elemTemp.find('.' + SLIDER_WRAP).eq(1).data('value', options.value[1]);
-    }else{
-      that.elemTemp.find('.' + SLIDER_WRAP).data('value', options.value);
-    }
-
-    //插入替代元素
-    othis.html(that.elemTemp);
-
-    //垂直滑块
-    if(options.type === 'vertical'){
-      that.elemTemp.height(options.height + 'px');
-    }
-
-    //显示间断点
-    if(options.showstep){
-      var number = (options.max - options.min) / options.step, item = '';
-      for(var i = 1; i < number + 1; i++) {
-        var step = i * 100 / number;
-        if(step < 100){
-          item += '<div class="layui-slider-step" style="'+ (options.type === 'vertical' ? 'bottom' : 'left') +':'+ step +'%"></div>'
-        }
-      }
-      that.elemTemp.append(item);
-    }
-
-    //插入输入框
-    if(options.input && !options.range){
-      var elemInput = $('<div class="layui-slider-input"><div class="layui-slider-input-txt"><input type="text" class="layui-input"></div><div class="layui-slider-input-btn"><i class="layui-icon layui-icon-up"></i><i class="layui-icon layui-icon-down"></i></div></div>');
-      othis.css("position","relative");
-      othis.append(elemInput);
-      othis.find('.' + SLIDER_INPUT_TXT).children('input').val(options.value);
-      if(options.type === 'vertical'){
-        elemInput.css({
-          left: 0
-          ,top: -48
-        });
-      } else {
-        that.elemTemp.css("margin-right", elemInput.outerWidth() + 15);
-      }
-    }
-
-    //给未禁止的滑块滑动事件
-    if(!options.disabled){
-      that.slide();
-    }else{
-      that.elemTemp.addClass(DISABLED);
-      that.elemTemp.find('.' + SLIDER_WRAP_BTN).addClass(DISABLED);
-    }
-
-    /**
-     * @description 设置提示文本内容
-     * @param {Element} sliderWrapBtnElem 提示文本节点元素
-     */
-    function setSliderTipsTxt(sliderWrapBtnElem) {
-      var value = sliderWrapBtnElem.parent().data('value');
-      var tipsTxt = options.setTips ? options.setTips(value) : value;
-      that.elemTemp.find('.' + SLIDER_TIPS).html(tipsTxt);
-    }
-
-    /**
-     * @description 计算提示文本元素的 position left
-     * @param {Element} sliderWrapBtnElem 提示文本节点元素
-     */
-    function calcSliderTipsLeft(sliderWrapBtnElem){
-      var sliderWidth = options.type === 'vertical' ? options.height : that.elemTemp[0].offsetWidth;
-      var sliderWrap = that.elemTemp.find('.' + SLIDER_WRAP);
-      var tipsLeft = options.type === 'vertical' ? (sliderWidth - sliderWrapBtnElem.parent()[0].offsetTop - sliderWrap.height()) : sliderWrapBtnElem.parent()[0].offsetLeft;
-      var left = tipsLeft / sliderWidth * 100;
-      return left
-    }
-
-    /**
-     * @description 设置提示文本元素的 position left
-     * @param {number} left 要设置的 left 的大小
-     */
-    function setSliderTipsLeft(left) {
-      if(options.type === 'vertical'){
-        that.elemTemp.find('.' + SLIDER_TIPS).css({
-          "bottom": left + '%',
-          "margin-bottom": "20px",
-          "display": "inline-block"
-        });
-      } else {
-        that.elemTemp.find('.' + SLIDER_TIPS).css({
-          "left": left + '%',
-          "display": "inline-block"
-        });
-      }
-    }
-
-    //判断是否要始终显示提示文本
-    if(options.tips){
-      if(options.tipsAlways){
-        var sliderWrapBtnElem = that.elemTemp.find('.' + SLIDER_WRAP_BTN);
-        setSliderTipsTxt(sliderWrapBtnElem)
-        var left = calcSliderTipsLeft(sliderWrapBtnElem);
-        setSliderTipsLeft(left)
-      }else{
-        //划过滑块显示数值
-        var timer;
-        that.elemTemp.find('.' + SLIDER_WRAP_BTN).on('mouseover', function(){
-          setSliderTipsTxt($(this))
-          var left = calcSliderTipsLeft($(this));
-          clearTimeout(timer);
-          timer = setTimeout(function(){
-            setSliderTipsLeft(left)
-          }, 300);
-        }).on('mouseout', function(){
-          clearTimeout(timer);
-          if(!options.tipsAlways){
-            that.elemTemp.find('.' + SLIDER_TIPS).css("display", "none");
-          }
-        });
-      }
-    }
-  };
-
   //滑块滑动
   Class.prototype.slide = function(setValue, value, i){
     var that = this;
@@ -289,9 +244,9 @@ layui.define(['jquery', 'lay'], function(exports) {
     var sliderWidth = function(){
       return options.type === 'vertical' ? options.height : sliderAct[0].offsetWidth
     };
-    var sliderWrap = sliderAct.find('.' + SLIDER_WRAP);
-    var sliderTxt = sliderAct.next('.' + SLIDER_INPUT);
-    var inputValue = sliderTxt.children('.' + SLIDER_INPUT_TXT).children('input').val();
+    var sliderWrap = sliderAct.find('.' + CONST.SLIDER_WRAP);
+    var sliderTxt = sliderAct.next('.' + CONST.SLIDER_INPUT);
+    var inputValue = sliderTxt.children('.' + CONST.SLIDER_INPUT_TXT).children('input').val();
     var step = 100 / ((options.max - options.min) / options.step);
     var precision = that.precision();
     var change = function(offsetValue, index, from){
@@ -306,27 +261,27 @@ layui.define(['jquery', 'lay'], function(exports) {
       var firLeft = valueTo(sliderWrap[0].offsetLeft);
       var secLeft = options.range ? valueTo(sliderWrap[1].offsetLeft) : 0;
       if(options.type === 'vertical'){
-        sliderAct.find('.' + SLIDER_TIPS).css({"bottom":offsetValue + '%', "margin-bottom":"20px"});
+        sliderAct.find('.' + CONST.SLIDER_TIPS).css({"bottom":offsetValue + '%', "margin-bottom":"20px"});
         firLeft = valueTo(sliderWidth() - sliderWrap[0].offsetTop - sliderWrap.height());
         secLeft = options.range ? valueTo(sliderWidth() - sliderWrap[1].offsetTop - sliderWrap.height()) : 0;
       }else{
-        sliderAct.find('.' + SLIDER_TIPS).css("left",offsetValue + '%');
+        sliderAct.find('.' + CONST.SLIDER_TIPS).css("left",offsetValue + '%');
       }
       firLeft = firLeft > 100 ? 100: firLeft;
       secLeft = secLeft > 100 ? 100: secLeft;
       var minLeft = Math.min(firLeft, secLeft)
       ,wrapWidth = Math.abs(firLeft - secLeft);
       if(options.type === 'vertical'){
-        sliderAct.find('.' + SLIDER_BAR).css({"height":wrapWidth + '%', "bottom":minLeft + '%'});
+        sliderAct.find('.' + CONST.SLIDER_BAR).css({"height":wrapWidth + '%', "bottom":minLeft + '%'});
       }else{
-        sliderAct.find('.' + SLIDER_BAR).css({"width":wrapWidth + '%', "left":minLeft + '%'});
+        sliderAct.find('.' + CONST.SLIDER_BAR).css({"width":wrapWidth + '%', "left":minLeft + '%'});
       }
       var selfValue = options.min + (options.max - options.min) * offsetValue / 100;
       selfValue = Number(parseFloat(selfValue).toFixed(precision));
       inputValue = selfValue;
-      sliderTxt.children('.' + SLIDER_INPUT_TXT).children('input').val(inputValue);
+      sliderTxt.children('.' + CONST.SLIDER_INPUT_TXT).children('input').val(inputValue);
       sliderWrap.eq(index).data('value', selfValue);
-      sliderAct.find('.' + SLIDER_TIPS).html(options.setTips ? options.setTips(selfValue) : selfValue);
+      sliderAct.find('.' + CONST.SLIDER_TIPS).html(options.setTips ? options.setTips(selfValue) : selfValue);
 
       //如果开启范围选择，则返回数组值
       if(options.range){
@@ -384,7 +339,7 @@ layui.define(['jquery', 'lay'], function(exports) {
     }
 
     //滑块滑动
-    sliderAct.find('.' + SLIDER_WRAP_BTN).each(function(index){
+    sliderAct.find('.' + CONST.SLIDER_WRAP_BTN).each(function(index){
       var othis = $(this);
       othis.on('mousedown touchstart', function(e){
         e = e || window.event;
@@ -411,16 +366,16 @@ layui.define(['jquery', 'lay'], function(exports) {
           if(left > sliderWidth())left = sliderWidth();
           var reaLeft = left / sliderWidth() * 100 / step;
           change(reaLeft, index);
-          othis.addClass(ELEM_HOVER);
-          sliderAct.find('.' + SLIDER_TIPS).show();
+          othis.addClass(CONST.ELEM_HOVER);
+          sliderAct.find('.' + CONST.SLIDER_TIPS).show();
           e.preventDefault();
         };
 
         var up = function(delay){
-          othis.removeClass(ELEM_HOVER);
+          othis.removeClass(CONST.ELEM_HOVER);
           if(!options.tipsAlways){
             setTimeout(function(){
-              sliderAct.find('.' + SLIDER_TIPS).hide();
+              sliderAct.find('.' + CONST.SLIDER_TIPS).hide();
             }, delay);
           }
         };
@@ -431,7 +386,7 @@ layui.define(['jquery', 'lay'], function(exports) {
 
     // 点击滑块
     sliderAct.on('click', function(e){
-      var main = $('.' + SLIDER_WRAP_BTN);
+      var main = $('.' + CONST.SLIDER_WRAP_BTN);
       var othis = $(this);
       if(!main.is(event.target) && main.has(event.target).length === 0 && main.length){
         var index;
@@ -457,9 +412,9 @@ layui.define(['jquery', 'lay'], function(exports) {
     });
 
     //点击加减输入框
-    sliderTxt.children('.' + SLIDER_INPUT_BTN).children('i').each(function(index){
+    sliderTxt.children('.' + CONST.SLIDER_INPUT_BTN).children('i').each(function(index){
       $(this).on('click', function(){
-        inputValue = sliderTxt.children('.' + SLIDER_INPUT_TXT).children('input').val();
+        inputValue = sliderTxt.children('.' + CONST.SLIDER_INPUT_TXT).children('input').val();
         if(index == 1){ //减
           inputValue = inputValue - options.step < options.min
             ? options.min
@@ -484,7 +439,7 @@ layui.define(['jquery', 'lay'], function(exports) {
       var inputScale =  (realValue - options.min) / (options.max - options.min) * 100 / step;
       change(inputScale, 0, 'done');
     };
-    sliderTxt.children('.' + SLIDER_INPUT_TXT).children('input').on('keydown', function(e){
+    sliderTxt.children('.' + CONST.SLIDER_INPUT_TXT).children('input').on('keydown', function(e){
       if(e.keyCode === 13){
         e.preventDefault();
         getInputValue.call(this);
@@ -492,17 +447,5 @@ layui.define(['jquery', 'lay'], function(exports) {
     }).on('change', getInputValue);
   };
 
-  //事件处理
-  Class.prototype.events = function(){
-     var that = this;
-     var options = that.config;
-  };
-
-  //核心入口
-  slider.render = function(options){
-    var inst = new Class(options);
-    return thisSlider.call(inst);
-  };
-
-  exports(MOD_NAME, slider);
+  exports(CONST.MOD_NAME, component);
 })