@ray-js/lamp-style-slider 0.0.2 → 0.0.3-beta-2

package/lib/components/slider/index.d.ts

@@ -33,59 +33,16 @@ export interface SjsSliderProps {
    * @default false
    */
   disable?: boolean;
-  /**
-   * @description.en closed
-   * @description.zh closed
-   * @default false
-   */
-  closed?: boolean;
-  /**
-   * @description.en left value
-   * @description.zh 左滑块初始值
-   * @default 0
-   */
-  start?: number;
-  /**
-   * @description.en watch value and change
-   * @description.zh 监听值，并随之变化
-   */
-  watchStart?: number;
-  /**
-   * @description.en left value min
-   * @description.zh 左滑块最小值限制
-   */
-  startMin?: number;
-  /**
-   * @description.en left value max
-   * @description.zh 左滑块最大值限制
-   */
-  startMax?: number;
   /**
    * @description.en Right slider initial value/one-way slider initial value
    * @description.zh 右滑块初始值/单向滑条初始值
    * @default 30
    */
   end?: number;
-  /**
-   * @description.en watch value and change
-   * @description.zh 监听值，并随之变化
-   */
-  watchEnd?: number;
-  /**
-   * @description.en Right slider min/one-way slider min
-   * @description.zh 右滑块最小值/单向滑条最小值
-   */
-  endMin?: number;
-  /**
-   * @description.en Right slider Max/one-way slider Max
-   * @description.zh 右滑块最大值/单向滑条最大值
-   */
-  endMax?: number;
   /**
    * @description.en min
    * @description.zh 最小值, 建议用 endMin 代替
    * @default 0
-   * @deprecated
    */
   min?: number;
   /**
@@ -109,12 +66,7 @@ export interface SjsSliderProps {
    * @description.en thumbStyle
    * @description.zh 滑块样式
    */
-  thumbStartStyle?: React.CSSProperties;
-  /**
-   * @description.en thumbStyle
-   * @description.zh 滑块样式
-   */
-  thumbEndStyle?: React.CSSProperties;
+  thumbStyle?: React.CSSProperties;
   /**
    * @description.en trackStyle
    * @description.zh 轨道样式
@@ -135,23 +87,6 @@ export interface SjsSliderProps {
    * @description.zh bar step样式
    */
   activeStepStyle?: React.CSSProperties;
-  /**
-   * @description.en mode
-   * @description.zh 单向还是双向
-   * @default normal
-   */
-  mode?: 'range' | 'normal';
-  /**
-   * @description.en barPad
-   * @description.zh 控制滑动bar的偏移量，用于样式微调
-   */
-  barPad?: number;
-  /**
-   * @description.en maxRangeOffset
-   * @description.zh 按钮对齐偏移
-   * @default null
-   */
-  maxRangeOffset?: number;
   /**
    * @description.en hideThumb
    * @description.zh 隐藏滑块
@@ -174,17 +109,17 @@ export interface SjsSliderProps {
    * @description.en callback
    * @description.zh 回调
    */
-  bindmove?: (event: EventType<'move'>) => void;
+  'bind:onChange'?: (event: EventType<'onChange'>) => void;
   /**
    * @description.en callback
    * @description.zh 回调
    */
-  bindend?: (event: EventType<'end'>) => void;
+  'bind:onEnd'?: (event: EventType<'onEnd'>) => void;
   /**
    * @description.en callback
    * @description.zh 回调
    */
-  bindstart?: (event: EventType<'start'>) => void;
+  'bind:onStart'?: (event: EventType<'onStart'>) => void;
   /**
    * @description.en reverse
    * @description.zh 是否反转
@@ -224,6 +159,16 @@ export interface SjsSliderProps {
    * @description.zh 动态计算thumb样式，如 { background: "rgba(0,0,0, {{text /100 }})" }
    */
   thumbStyleCalc?: Partial<Record<keyof React.CSSProperties, string>>;
+  /**
+   * @description.en hideBarOnFirstRender
+   * @description.zh 首次渲染时隐藏bar
+   */
+  hideBarOnFirstRender?: boolean;
+  /**
+   * @description.en hotAreaStyle
+   * @description.zh 点击热区样式
+   */
+  hotAreaStyle?: React.CSSProperties;
 }
 
 const SjsSlider: React.FC<SjsSliderProps>;

package/lib/components/slider/index.js

@@ -5,15 +5,6 @@ import "core-js/modules/es.array.concat.js";
 import "core-js/modules/es.array.map.js";
 import "core-js/modules/es.array.fill.js";
 import "core-js/modules/es.parse-int.js";
-/* eslint-disable func-names */
-/* eslint-disable vars-on-top */
-import 'core-js/modules/es.number.constructor.js';
-import 'core-js/modules/es.regexp.exec.js';
-import 'core-js/modules/es.regexp.test.js';
-import 'core-js/modules/es.array.concat.js';
-import 'core-js/modules/es.array.map.js';
-import 'core-js/modules/es.array.fill.js';
-import 'core-js/modules/es.parse-int.js';
 // eslint-disable-next-line no-undef
 Component({
   options: {
@@ -28,14 +19,9 @@ Component({
       type: Boolean,
       value: false
     },
-    closed: {
-      type: Boolean,
-      value: false
-    },
     // 左滑块初始值
     start: {
-      type: Number,
-      value: 0
+      type: Number
     },
     // 左滑块最小值限制
     startMin: {
@@ -47,8 +33,7 @@ Component({
     },
     // 右滑块初始值/单向滑条初始值
     end: {
-      type: Number,
-      value: 30
+      type: Number
     },
     watchStart: {
       type: Number
@@ -72,7 +57,7 @@ Component({
     // 最大值
     max: {
       type: Number,
-      value: 1000
+      value: 100
     },
     // 阶段值
     step: {
@@ -84,11 +69,7 @@ Component({
       type: Number
     },
     // 滑块样式
-    thumbStartStyle: {
-      type: String
-    },
-    // 滑块样式
-    thumbEndStyle: {
+    thumbStyle: {
       type: String
     },
     // 轨道样式
@@ -107,18 +88,10 @@ Component({
     activeStepStyle: {
       type: String
     },
-    // 单向还是双向 range: 双向，normal: 单向
-    mode: {
-      type: String
-    },
     // 方向 "horizontal" | "vertical"
     direction: {
       type: String
     },
-    // 控制滑动bar的偏移量，用于样式微调
-    barPad: {
-      type: Number
-    },
     // 隐藏滑块
     hideThumb: {
       type: Boolean,
@@ -137,18 +110,13 @@ Component({
     // 使用触摸跳跃
     enableTouch: {
       type: Boolean,
-      value: false
+      value: true
     },
     // 使用触摸bar增加偏移
     enableTouchBar: {
       type: Boolean,
       value: false
     },
-    // 使用触摸跳跃
-    maxRangeOffset: {
-      type: Number,
-      value: 0
-    },
     // 唯一ID
     instanceId: {
       type: String
@@ -168,6 +136,15 @@ Component({
     // 动态计算thumb样式，如 { background: "rgba(0,0,0, {{text}}/100)" }
     thumbStyleCalc: {
       type: Object
+    },
+    // 首次渲染时隐藏bar
+    hideBarOnFirstRender: {
+      type: Boolean,
+      value: false
+    },
+    // 点击热区样式
+    hotAreaStyle: {
+      type: String
     }
   },
   data: {
@@ -178,7 +155,7 @@ Component({
     /**
      * 组件的方法列表
      */
-    ready: function () {
+    ready: function ready() {
       var isNumber = function (n) {
         return /\d+/.test(n);
       };
@@ -198,9 +175,9 @@ Component({
     }
   },
   methods: {
-    setText: function (_ref) {
-      var instanceId = _ref.instanceId;
-      var content = _ref.content;
+    setText: function setText(_ref) {
+      var instanceId = _ref.instanceId,
+        content = _ref.content;
       if (!this.data.showText) return;
       if (instanceId !== this.data.instanceId) return;
       this.setData({

package/lib/components/slider/index.less

@@ -1,34 +1,21 @@
 .rayui-slider {
-  --slider-width: 300px;
   --slider-height: 10px;
-  // --slider-top-position: 2.5px;
-  --slider-top-position: 0px;
+  --slider-top-position: 2.5px;
   --range-width: 20px;
   --range-left-position: 20px;
-  --thumb-height: 68rpx;
-  --thumb-width: 68rpx;
+  --thumb-height: 24px;
+  --thumb-width: 24px;
   --thumb-left-position: 30px;
-  --thumb-active-color: #FFFFFF;
+  --thumb-active-color: #ffffff;
 
   border-radius: 5px;
-  background: #E0E0E0;
-  width: var(--slider-width);
+  background: #e0e0e0;
   height: var(--slider-height);
   margin: var(--slider-top-position);
   position: relative;
   display: flex;
   align-items: center;
 
-  .rayui-slider-mask {
-    width: 100%;
-    height: 100%;
-    position: absolute;
-    left: 0;
-    top: 0;
-    background: rgba(0, 0, 0, 0.3);
-    border-radius: 16px;
-  }
-
   &-steps {
     position: absolute;
     left: 0;
@@ -39,17 +26,14 @@
     display: flex;
     justify-content: space-between;
     align-items: center;
-
     &-dot {
       width: 4px;
       height: 4px;
       border-radius: 50%;
-      background-color: #328EFF;
-
+      background-color: #328eff;
       &:first-child {
         opacity: 0;
       }
-
       &:last-child {
         opacity: 0;
       }
@@ -57,21 +41,20 @@
   }
 
   &-bar {
+    display: none;
     position: absolute;
     width: var(--range-width);
     height: var(--slider-height);
-    background: transparent;
+    background: #328eff;
     cursor: pointer;
     border-top-left-radius: 5px;
     border-bottom-left-radius: 5px;
     flex-shrink: 0;
     will-change: width;
     overflow: hidden;
-
     .rayui-slider-steps-dot {
       background-color: rgba(51, 255, 241, 0.75);
     }
-
     &-text {
       position: absolute;
       top: 50%;
@@ -96,11 +79,12 @@
   &-thumb {
     position: absolute;
     will-change: left;
+    display: none;
 
     &-start {
       top: 50%;
       transform: translateY(-50%);
-
+      display: none;
       &-render {
         width: var(--thumb-width);
         height: var(--thumb-height);
@@ -110,11 +94,10 @@
         box-shadow: rgb(0 0 0 / 12%) 0px 0.5px 4px, rgb(0 0 0 / 12%) 0px 6px 13px;
       }
     }
-
     &-end {
       top: 50%;
       transform: translateY(-50%);
-
+      display: none;
       &-render {
         width: var(--thumb-width);
         height: var(--thumb-height);
@@ -138,8 +121,9 @@
   }
 
   &.vertical {
-    height: var(--slider-width);
+    --slider-width: 300px;
     width: var(--slider-height);
+    height: var(--slider-width);
     align-items: flex-start;
     justify-content: center;
 
@@ -152,26 +136,22 @@
         flex-direction: column;
         align-items: center;
       }
-
       &-bar {
         height: var(--range-width);
         width: var(--slider-height);
-        top: calc(var(--range-left-position) + var(--thumb-width)/2);
+        top: calc(var(--range-left-position) + var(--thumb-width) / 2);
         border-top-right-radius: 5px;
         border-bottom-right-radius: 5px;
         transform: translateX(-50%);
         left: 50%;
         will-change: height;
       }
-
       &-thumb {
         will-change: top;
-
         &-start {
           left: 50%;
           transform: translateX(-50%);
         }
-
         &-end {
           left: 50%;
           transform: translateX(-50%);
@@ -192,4 +172,13 @@
   &.disabled {
     pointer-events: none;
   }
-}
+}
+
+.rayui-slider_wrap {
+  padding: 20rpx 0;
+
+  &.vertical {
+    padding: 0 20rpx;
+    display: inline-block;
+  }
+}

package/lib/components/slider/index.sjs

@@ -1,5 +1,3 @@
-// @ts-check
-
 // props
 const THUMBS = ['start', 'end'];
 
@@ -19,36 +17,69 @@ const setOstValue = (ownerInstance, instanceId, key, value) => {
   ost[instanceId] = state;
 };
 
+const isUndefined = val => typeof val === 'undefined';
+const isNull = val => val === null;
+/**
+ * 值不存在
+ */
+const isNullOrUndefined = val => isNull(val) || isUndefined(val);
+/**
+ * 值存在
+ */
+const isNotNullOrUndefined = val => !isNullOrUndefined(val);
+
+const isValuesInited = (ownerInstance, instanceId) => {
+  return (
+    isNotNullOrUndefined(getStart(ownerInstance, instanceId)) && getEnd(ownerInstance, instanceId)
+  );
+};
+
+// hideBarOnFirstRender
+// 判断第一次渲染和后续更新渲染
+
 // watch props
 const createPropObserver = prop => instanceId =>
   function (newValue, oldValue, ownerInstance) {
     const ost = getOst(ownerInstance, instanceId);
     const isUpdate = oldValue !== undefined;
-    if (newValue === oldValue) return;
 
     if (prop === 'start') {
-      setStart(ownerInstance, instanceId, getNumber(newValue, 0));
+      setStart(ownerInstance, instanceId, getNumber(newValue, null));
     }
     if (prop === 'watchstart' && isUpdate) {
-      setStart(ownerInstance, instanceId, getNumber(newValue, 0));
+      setStart(ownerInstance, instanceId, getNumber(newValue, null));
     }
     if (prop === 'end') {
-      setEnd(ownerInstance, instanceId, getNumber(newValue, 30));
-      updateThumbBg({
-        ownerInstance,
-        instanceId,
-      });
+      const end = convertOutValueToValue(ownerInstance, instanceId, getNumber(newValue, null));
+      setEnd(ownerInstance, instanceId, end);
     }
     if (prop === 'watchend' && isUpdate) {
-      setEnd(ownerInstance, instanceId, getNumber(newValue, 30));
+      setEnd(
+        ownerInstance,
+        instanceId,
+        convertOutValueToValue(ownerInstance, instanceId, getNumber(newValue, null))
+      );
     }
+
     setOstValue(ownerInstance, instanceId, '_startValueInPixels', null);
     setOstValue(ownerInstance, instanceId, '_endValueInPixels', null);
 
-    setOstValue(ownerInstance, instanceId, 'rendered', false);
     if (!ost.rendered) {
+      if (isValuesInited(ownerInstance, instanceId)) {
+        setOstValue(ownerInstance, instanceId, 'rendered', true);
+      }
+    }
+
+    const hideBarOnFirstRender = isHideBarOnFirstRender(ownerInstance, instanceId);
+
+    if (hideBarOnFirstRender) {
+      if (ost.rendered && isValuesInited(ownerInstance, instanceId)) {
+        updateSlider(ownerInstance, instanceId);
+      } else {
+        hideBarThumbs(ownerInstance, instanceId);
+      }
+    } else {
       updateSlider(ownerInstance, instanceId);
-      setOstValue(ownerInstance, instanceId, 'rendered', true);
     }
   };
 
@@ -63,6 +94,31 @@ const getMax = (ownerInstance, instanceId) => {
   return min + 100;
 };
 
+const getValueMin = (ownerInstance, instanceId) => {
+  return getNumber(getProps(ownerInstance, instanceId).valuemin, 0);
+};
+
+const convertValueToOutValue = (ownerInstance, instanceId, value) => {
+  const valueMin = getValueMin(ownerInstance, instanceId);
+  if (valueMin) {
+    const max = getMax(ownerInstance, instanceId);
+    const step = getStep(ownerInstance, instanceId);
+    const result = parseInt(valueMin + ((max - valueMin) / max) * value);
+    // 这里处理step
+    return Number(result / step).toFixed(0) * step;
+  }
+  return value;
+};
+
+const convertOutValueToValue = (ownerInstance, instanceId, outValue) => {
+  const valueMin = getValueMin(ownerInstance, instanceId);
+  if (valueMin) {
+    const max = getMax(ownerInstance, instanceId);
+    return parseInt((outValue - valueMin) / ((max - valueMin) / max));
+  }
+  return outValue;
+};
+
 const getStep = (ownerInstance, instanceId) => {
   return getNumber(getProps(ownerInstance, instanceId).step, 1);
 };
@@ -109,6 +165,11 @@ const isShowSteps = (ownerInstance, instanceId) => {
   return !!props.showsteps;
 };
 
+const isHideBarOnFirstRender = (ownerInstance, instanceId) => {
+  const props = getProps(ownerInstance, instanceId);
+  return !!props.hidebaronfirstrender;
+};
+
 const isVerticalMode = (ownerInstance, instanceId) => {
   const props = getProps(ownerInstance, instanceId);
   return props.direction === 'vertical';
@@ -154,6 +215,21 @@ const getThumbWidth = (ownerInstance, instanceId, type = 'width') => {
   }
 };
 
+function hideBarThumbs(ownerInstance, instanceId) {
+  const thumbs = queryComponentAll(ownerInstance, instanceId, '.rayui-slider-thumb');
+  const bar = queryComponent(ownerInstance, instanceId, '.rayui-slider-bar');
+
+  thumbs.forEach(thumb => {
+    thumb.setStyle({
+      opacity: 0,
+    });
+  });
+
+  bar.setStyle({
+    opacity: 0,
+  });
+}
+
 function updateSlider(ownerInstance, instanceId) {
   const ost = getOst(ownerInstance, instanceId);
 
@@ -183,12 +259,6 @@ function updateSlider(ownerInstance, instanceId) {
       (isVertical
         ? ost_slider.getBoundingClientRect().height
         : ost_slider.getBoundingClientRect().width) - ost_thumbWidth;
-    if (!isRerverse && !isRange && !isVertical) {
-      ost_maxRange -= ost_thumbWidth;
-    }
-    if (isVertical && isRerverse) {
-      ost_maxRange -= ost_thumbWidth;
-    }
 
     ost_maxRange += getNumber(props.maxrangeoffset, 0);
     setOstValue(ownerInstance, instanceId, 'maxRange', ost_maxRange);
@@ -215,7 +285,7 @@ function updateSlider(ownerInstance, instanceId) {
       : 0;
 
     setThumb(ownerInstance, instanceId, 'start', _startValueInPixels, {
-      display: hideThumb ? 'none' : isRange ? 'block' : 'none', // 单向隐藏左按钮
+      display: hideThumb ? 'none' : isRange ? 'block' : 'none', // 单向隐藏左按钮,
     });
 
     const endValue = isRerverse
@@ -227,7 +297,7 @@ function updateSlider(ownerInstance, instanceId) {
     setText(
       ownerInstance,
       instanceId,
-      convertPixelsToValue(ownerInstance, instanceId, endValue, getStep(ownerInstance, instanceId))
+      convertValueToOutValue(ownerInstance, instanceId, getEnd(ownerInstance, instanceId))
     );
 
     setRange(
@@ -249,17 +319,16 @@ function updateSlider(ownerInstance, instanceId) {
     }
 
     if (hideThumb || enableTouchBar) {
-      const trackCurrentX =
-        ost.trackCurrentX ||
-        convertValueToPixels(
-          ownerInstance,
-          instanceId,
-          isRerverse
-            ? getMax(ownerInstance, instanceId) -
-                getMin(ownerInstance, instanceId) -
-                getEnd(ownerInstance, instanceId)
-            : getEnd(ownerInstance, instanceId)
-        );
+      // 修复问题
+      const trackCurrentX = convertValueToPixels(
+        ownerInstance,
+        instanceId,
+        isRerverse
+          ? getMax(ownerInstance, instanceId) -
+              getMin(ownerInstance, instanceId) -
+              getEnd(ownerInstance, instanceId)
+          : getEnd(ownerInstance, instanceId)
+      );
       setOstValue(ownerInstance, instanceId, 'trackCurrentX', trackCurrentX);
     }
 
@@ -315,6 +384,7 @@ function convertPixelsToValue(ownerInstance, instanceId, value, step = 1) {
         (getMax(ownerInstance, instanceId) - getMin(ownerInstance, instanceId))
     )
   );
+
   // round to step value
   _value = step > 0 ? Math.round(_value / step) * step : _value;
   return parseFloat(_value.toFixed(2));
@@ -351,13 +421,15 @@ function setThumb(ownerInstance, instanceId, thumbName, valueInPixels, style) {
     if (thumb.getDataset().name === thumbName) {
       if (isVertical) {
         thumb.setStyle({
+          opacity: 1,
           ...(style || {}),
-          top: `${valueInPixels - 3}px`,
+          top: `${valueInPixels}px`,
         });
       } else {
         thumb.setStyle({
+          opacity: 1,
           ...(style || {}),
-          left: `${valueInPixels - 3}px`,
+          left: `${valueInPixels}px`,
         });
       }
     }
@@ -440,18 +512,16 @@ function setRange(ownerInstance, instanceId, start, end) {
 
   const props = getProps(ownerInstance, instanceId);
 
-  const barPad = props.barpad;
-
-  let rangeWidth = width + thumbWidth + barPad;
+  let rangeWidth = width + thumbWidth / 2;
   if (isReverse) {
     rangeWidth = ost.trackWidth - rangeWidth;
   }
 
   ost.sliderRange.setStyle({
-    [isVertical ? (isReverse ? 'bottom' : 'top') : isReverse ? 'right' : 'left']: `${
-      minThumb - barPad / 2
-    }px`,
+    [isVertical ? (isReverse ? 'bottom' : 'top') : isReverse ? 'right' : 'left']: `${minThumb}px`,
     [isVertical ? 'height' : 'width']: `${rangeWidth}px`,
+    opacity: 1,
+    display: 'block',
   });
 }
 
@@ -476,13 +546,13 @@ const handleMouseDown = instanceId => (event, ownerInstance) => {
   if (THUMBS.includes(thumbId)) {
     setOstValue(ownerInstance, instanceId, 'currentThumbName', thumbId);
     setOstValue(ownerInstance, instanceId, 'currentThumb', target);
+
+    const ost_slider = queryComponent(ownerInstance, instanceId);
+    const rect = ost_slider.getBoundingClientRect();
+
     const startX = isVertical ? event.touches[0].pageY : event.touches[0].pageX;
 
-    const currentThumbPositionX =
-      startX -
-      (isVertical
-        ? ost.currentThumb.getBoundingClientRect().top
-        : ost.currentThumb.getBoundingClientRect().left);
+    const currentThumbPositionX = startX - (isVertical ? rect.top : rect.left);
 
     setOstValue(ownerInstance, instanceId, 'currentThumbPositionX', currentThumbPositionX);
 
@@ -501,15 +571,21 @@ const handleTrackMouseDown = instanceId => (event, ownerInstance) => {
 
   const ost = getOst(ownerInstance, instanceId);
   const isVertical = isVerticalMode(ownerInstance, instanceId);
-  const startX = isVertical ? event.touches[0].clientY : event.touches[0].pageX;
 
-  const trackStartX =
-    startX -
-    (isVertical ? ost.slider.getBoundingClientRect().top : ost.slider.getBoundingClientRect().left);
+  const ost_slider = queryComponent(ownerInstance, instanceId);
+  const rect = ost_slider.getBoundingClientRect();
+  const startX = isVertical
+    ? event.touches[0].pageY - rect.top
+    : event.touches[0].pageX - rect.left;
+
+  // 修复touch模式触摸抖动
+  const trackStartX = startX;
   setOstValue(ownerInstance, instanceId, 'trackStartX', trackStartX);
 
   onStart(event, ownerInstance, instanceId);
-  setOstValue(ownerInstance, instanceId, 'currentThumbName', 'end');
+  if (!isRange) {
+    setOstValue(ownerInstance, instanceId, 'currentThumbName', 'end');
+  }
 
   if (!isRange && !hideThumb && isEnableTouch(ownerInstance, instanceId) && !enableTouchBar) {
     const thumbEnd = queryComponent(ownerInstance, instanceId, '.rayui-slider-thumb-end');
@@ -517,11 +593,11 @@ const handleTrackMouseDown = instanceId => (event, ownerInstance) => {
     setOstValue(ownerInstance, instanceId, 'currentThumb', thumbEnd);
 
     const offset = isVertical
-      ? thumbEnd.getBoundingClientRect().height / 2
-      : thumbEnd.getBoundingClientRect().width / 2;
+      ? thumbEnd.getBoundingClientRect().height
+      : thumbEnd.getBoundingClientRect().width;
 
     if (thumbEnd) {
-      let moveX = ost.trackStartX - offset;
+      let moveX = ost.trackStartX - offset / 2;
 
       let moveValue = convertPixelsToValue(
         ownerInstance,
@@ -562,7 +638,11 @@ const onMouseMove = instanceId => (event, ownerInstance) => {
   const enableTouchBar = isEnableTouchBar(ownerInstance, instanceId);
   // track mouse mouve only when toggle true
   if (ost.isMoving) {
-    const currentX = isVertical ? event.touches[0].pageY : event.touches[0].pageX;
+    const ost_slider = queryComponent(ownerInstance, instanceId);
+    const rect = ost_slider.getBoundingClientRect();
+    const currentX = isVertical
+      ? event.touches[0].pageY - rect.top
+      : event.touches[0].pageX - rect.left;
     let moveX =
       currentX -
       ost.currentThumbPositionX -
@@ -634,6 +714,22 @@ const onMouseMove = instanceId => (event, ownerInstance) => {
     // lock the thumb within the bounaries
     moveValue = setBoundries(ownerInstance, instanceId, moveValue);
 
+    const props = getProps(ownerInstance, instanceId);
+    switch (ost.currentThumbName) {
+      case 'start':
+        const _endValueInPixels = ost._endValueInPixels;
+        // if (moveX > _endValueInPixels) return false;
+        if (props.startmin && moveValue < props.startmin) return false;
+        if (props.startmax && moveValue > props.startmax) return false;
+        break;
+      case 'end':
+        const _startValueInPixels = ost._startValueInPixels;
+        // if (moveX < _startValueInPixels) return false;
+        if (props.endmin && moveValue < props.endmin) return false;
+        if (props.endmax && moveValue > props.endmax) return false;
+        break;
+    }
+
     setOstValue(ownerInstance, instanceId, '_start', 0);
     setOstValue(ownerInstance, instanceId, '_end', moveValue);
 
@@ -647,20 +743,7 @@ const onMouseMove = instanceId => (event, ownerInstance) => {
   }
 };
 
-const limit = (number, min, max) => Math.min(max, Math.max(min, number));
-
-const updateThumbBg = ({ ownerInstance, instanceId }) => {
-  // !!! thumb 内部颜色填充 ==== start
-  // const { hue, closed } = getProps(ownerInstance, instanceId);
-  const isRerverse = isReverseMode(ownerInstance, instanceId);
-  const thumbEnd = ownerInstance.selectComponent('.rayui-slider-thumb-end-render');
-  const reverseRange = isRerverse
-    ? getMax(ownerInstance, instanceId) - getRangeValue(ownerInstance, instanceId)
-    : 0;
-  const end = isRerverse ? reverseRange : getEnd(ownerInstance, instanceId);
-};
-
-const onChange = (ownerInstance, instanceId, position) => {
+const onChange = (ownerInstance, instanceId, position, skipDiff = false) => {
   const ost = getOst(ownerInstance, instanceId);
   const isRerverse = isReverseMode(ownerInstance, instanceId);
   const reverseRange = isRerverse
@@ -671,26 +754,31 @@ const onChange = (ownerInstance, instanceId, position) => {
   const nextEnd = isRerverse ? reverseRange : getEnd(ownerInstance, instanceId);
   const nextRange = isRerverse ? reverseRange : getRangeValue(ownerInstance, instanceId);
 
-  // 如果start、end、range 都没变
-  if (nextStart === ost._last_start && nextEnd === ost._last_end && nextRange === ost._last_range) {
-    return;
+  if (skipDiff) {
+    // noop
+  } else {
+    // 如果start、end、range 都没变
+    if (
+      nextStart === ost._last_start &&
+      nextEnd === ost._last_end &&
+      nextRange === ost._last_range
+    ) {
+      return;
+    }
   }
-  setText(ownerInstance, instanceId, nextEnd);
+
+  const out = convertValueToOutValue(ownerInstance, instanceId, nextEnd);
+  setText(ownerInstance, instanceId, out);
 
   setOstValue(ownerInstance, instanceId, '_last_start', nextStart);
   setOstValue(ownerInstance, instanceId, '_last_end', nextEnd);
   setOstValue(ownerInstance, instanceId, '_last_range', nextRange);
 
-  updateThumbBg({
-    ownerInstance,
-    instanceId,
-  });
-
   // publish
-  ownerInstance.triggerEvent('move', {
+  ownerInstance.triggerEvent('onChange', {
     instanceId,
     start: nextStart,
-    end: nextEnd,
+    end: out,
     range: nextRange,
     position,
   });
@@ -706,21 +794,19 @@ const onEnd = (event, ownerInstance, instanceId) => {
   const nextStart = getStart(ownerInstance, instanceId);
   const nextEnd = isRerverse ? reverseRange : getEnd(ownerInstance, instanceId);
   const nextRange = isRerverse ? reverseRange : getRangeValue(ownerInstance, instanceId);
-  setText(ownerInstance, instanceId, nextEnd);
+
+  const out = convertValueToOutValue(ownerInstance, instanceId, nextEnd);
+  setText(ownerInstance, instanceId, out);
 
   setOstValue(ownerInstance, instanceId, '_last_start', null);
   setOstValue(ownerInstance, instanceId, '_last_end', null);
   setOstValue(ownerInstance, instanceId, '_last_range', null);
-  updateThumbBg({
-    ownerInstance,
-    instanceId,
-  });
 
   // publish
-  ownerInstance.triggerEvent('end', {
+  ownerInstance.triggerEvent('onEnd', {
     instanceId,
     start: nextStart,
-    end: nextEnd,
+    end: out,
     range: nextRange,
     position: target.getDataset().name || 'end',
   });
@@ -736,17 +822,14 @@ const onStart = (event, ownerInstance, instanceId) => {
   const nextEnd = isRerverse ? reverseRange : getEnd(ownerInstance, instanceId);
   const nextRange = isRerverse ? reverseRange : getRangeValue(ownerInstance, instanceId);
 
-  setText(ownerInstance, instanceId, nextEnd);
-  updateThumbBg({
-    ownerInstance,
-    instanceId,
-  });
+  const out = convertValueToOutValue(ownerInstance, instanceId, nextEnd);
+  setText(ownerInstance, instanceId, out);
 
   // publish
-  ownerInstance.triggerEvent('start', {
+  ownerInstance.triggerEvent('onStart', {
     instanceId,
     start: nextStart,
-    end: nextEnd,
+    end: out,
     range: nextRange,
     position: target.getDataset().name || 'end',
   });
@@ -767,12 +850,61 @@ const onMouseUp = instanceId => (event, ownerInstance) => {
 const onTrackMouseUp = instanceId => (event, ownerInstance) => {
   const hideThumb = isHideThumb(ownerInstance, instanceId);
   const ost = getOst(ownerInstance, instanceId);
-  setOstValue(ownerInstance, instanceId, 'trackCurrentX', ost.trackNextX);
+  setOstValue(
+    ownerInstance,
+    instanceId,
+    'trackCurrentX',
+    ost.trackNextX === undefined ? ost.trackCurrentX : ost.trackNextX
+  );
   onEnd(event, ownerInstance, instanceId);
   setOstValue(ownerInstance, instanceId, 'isMoving', false);
+
   updateThumbZIndex(ownerInstance, instanceId);
 };
 
+const onAdd = instanceId => (event, ownerInstance) => {
+  const end = getEnd(ownerInstance, instanceId);
+  const step = getStep(ownerInstance, instanceId);
+  const max = getMax(ownerInstance, instanceId);
+  const next = end + step;
+  const moveValue = getNumber(next <= max ? next : max, null);
+
+  setOstValue(ownerInstance, instanceId, '_end', moveValue);
+
+  const moveX = convertValueToPixels(ownerInstance, instanceId, moveValue);
+
+  setThumb(ownerInstance, instanceId, 'end', moveX);
+  setRange(ownerInstance, instanceId, 0, moveX);
+  onChange(ownerInstance, instanceId, 'end');
+
+  const trackCurrentX = convertValueToPixels(ownerInstance, instanceId, moveValue);
+  setOstValue(ownerInstance, instanceId, 'trackCurrentX', trackCurrentX);
+
+  onChange(ownerInstance, instanceId, 'end', true);
+  onEnd(event, ownerInstance, instanceId);
+};
+const onSub = instanceId => (event, ownerInstance) => {
+  const end = getEnd(ownerInstance, instanceId);
+  const step = getStep(ownerInstance, instanceId);
+  const min = getMin(ownerInstance, instanceId);
+  const next = end - step;
+  const moveValue = getNumber(next >= min ? next : min, null);
+
+  setOstValue(ownerInstance, instanceId, '_end', moveValue);
+
+  const moveX = convertValueToPixels(ownerInstance, instanceId, moveValue);
+
+  setThumb(ownerInstance, instanceId, 'end', moveX);
+  setRange(ownerInstance, instanceId, 0, moveX);
+  onChange(ownerInstance, instanceId, 'end');
+
+  const trackCurrentX = convertValueToPixels(ownerInstance, instanceId, moveValue);
+  setOstValue(ownerInstance, instanceId, 'trackCurrentX', trackCurrentX);
+
+  onChange(ownerInstance, instanceId, 'end', true);
+  onEnd(event, ownerInstance, instanceId);
+};
+
 module.exports = {
   startPropObserver: createPropObserver('start'),
   endPropObserver: createPropObserver('end'),
@@ -783,4 +915,6 @@ module.exports = {
   onMouseUp,
   onTrackMouseUp,
   handleTrackMouseDown,
+  onAdd,
+  onSub,
 };

package/lib/components/slider/index.tyml

@@ -1,90 +1,90 @@
 <sjs src="./index.sjs" module="computed"></sjs>
 
-<view 
-  id="{{instanceId}}"
-  class="rayui-slider {{direction === 'vertical' ? 'vertical': 'horizontal'}} {{reverse ? 'reverse': 'no-reverse'}} {{disable ? 'disabled': ''}} {{className}}"
-  disable="{{disable}}"
-  
-  change:start="{{computed.startPropObserver(instanceId)}}"
-  change:end="{{computed.endPropObserver(instanceId)}}"
-  change:watchstart="{{computed.watchstartPropObserver(instanceId)}}"
-  change:watchend="{{computed.watchenddPropObserver(instanceId)}}"
-  change:hue="{{hue}}"
-  start="{{start}}"
-  end="{{end}}"
-  watchstart="{{watchStart}}"
-  watchend="{{watchEnd}}"
-  
-  data-hue="{{hue}}"
-  data-min="{{min}}"
-  data-max="{{max}}"
-  data-closed="{{closed}}"
-
-  data-step="{{step}}"
-
+<view class="rayui-slider_wrap {{direction === 'vertical' ? 'vertical': 'horizontal'}}"
   bind:touchstart="{{computed.handleTrackMouseDown(instanceId)}}"
   bind:touchmove="{{computed.onMouseMove(instanceId)}}"
   bind:touchend="{{computed.onTrackMouseUp(instanceId)}}"
+  style="{{hotAreaStyle}}"
+>
+  <view 
+    id="{{instanceId}}"
+    class="rayui-slider {{direction === 'vertical' ? 'vertical': 'horizontal'}} {{reverse ? 'reverse': 'no-reverse'}} {{disable ? 'disabled': ''}} {{className}}"
+    disable="{{disable}}"
+    
+    change:start="{{computed.startPropObserver(instanceId)}}"
+    change:end="{{computed.endPropObserver(instanceId)}}"
+    change:watchstart="{{computed.watchstartPropObserver(instanceId)}}"
+    change:watchend="{{computed.watchenddPropObserver(instanceId)}}"
+    start="{{start}}"
+    end="{{end}}"
+    watchstart="{{watchStart}}"
+    watchend="{{watchEnd}}"
 
-  data-startmin="{{startMin}}"
-  data-startmax="{{startMax}}"
-  
-  data-endmin="{{endMin}}"
-  data-endmax="{{endMax}}"
+    data-max="{{max}}"
 
-  data-mode="{{mode}}"
-  data-barpad="{{barPad}}"
-  data-hidethumb="{{hideThumb}}"
-  data-showsteps="{{showSteps}}"
-  data-direction="{{direction}}"
-  data-reverse="{{reverse}}"
-  data-enabletouch="{{enableTouch}}"
-  data-enabletouchbar="{{enableTouchBar}}"
-  data-maxrangeoffset="{{maxRangeOffset}}"
-  data-texttemplate="{{textTemplate}}"
-  data-showtext="{{showText}}"
-  data-thumbstylecalc="{{thumbStyleCalc}}"
+    data-step="{{step}}"
 
-  style="{{trackStyle}}"
->
-  <view ty:if="{{disable}}" class="rayui-slider-mask"></view>
-  <view ty:if="{{showSteps}}" class="rayui-slider-steps">
-    <view class="rayui-slider-steps-dot" ty:for="{{steps}}" style="{{stepStyle}}" ty:for-item="step">
-    </view>
-  </view>
-  <view class="rayui-slider-bar"
-    style="{{barStyle}}"
+    data-startmin="{{startMin}}"
+    data-startmax="{{startMax}}"
+    data-valuemin="{{min}}"
+    
+    data-endmin="{{endMin}}"
+    data-endmax="{{endMax}}"
+
+    data-mode="{{mode}}"
+    data-barpad="{{barPad}}"
+    data-hidethumb="{{hideThumb}}"
+    data-showsteps="{{showSteps}}"
+    data-direction="{{direction}}"
+    data-reverse="{{reverse}}"
+    data-enabletouch="{{enableTouch}}"
+    data-enabletouchbar="{{enableTouchBar}}"
+    data-maxrangeoffset="{{maxRangeOffset}}"
+    data-texttemplate="{{textTemplate}}"
+    data-showtext="{{showText}}"
+    data-thumbstylecalc="{{thumbStyleCalc}}"
+    data-hidebaronfirstrender="{{hideBarOnFirstRender}}"
+
+    style="{{trackStyle}}"
   >
-    <view ty:if="{{showText}}" class="rayui-slider-bar-text" style="{{textStyle}}">
-      {{text}}
+    <view ty:if="{{showSteps}}" class="rayui-slider-steps">
+      <view class="rayui-slider-steps-dot" ty:for="{{steps}}" style="{{stepStyle}}" ty:for-item="step">
+      </view>
     </view>
-    <view class="rayui-slider-bar-steps_wrap">
-      <view ty:if="{{showSteps}}" class="rayui-slider-steps">
-        <view class="rayui-slider-steps-dot" ty:for="{{steps}}" style="{{activeStepStyle}}" ty:for-item="step">
-        </view>
-      </view>  
+    <view class="rayui-slider-bar"
+      style="{{barStyle}}"
+    >
+      <view ty:if="{{showText}}" class="rayui-slider-bar-text" style="{{textStyle}}">
+        {{text}}
+      </view>
+      <view class="rayui-slider-bar-steps_wrap">
+        <view ty:if="{{showSteps}}" class="rayui-slider-steps">
+          <view class="rayui-slider-steps-dot" ty:for="{{steps}}" style="{{activeStepStyle}}" ty:for-item="step">
+          </view>
+        </view>  
+      </view>
     </view>
-  </view>
-  <view
-    class="rayui-slider-thumb rayui-slider-thumb-start"
-    data-name="start"
-    bind:touchstart="{{computed.handleMouseDown(instanceId)}}"
-    bind:touchend="{{computed.onMouseUp(instanceId)}}"
-  >
-    <view 
+    <view
+      class="rayui-slider-thumb rayui-slider-thumb-start"
       data-name="start"
-      class="rayui-slider-thumb-render rayui-slider-thumb-start-render" style="{{thumbStartStyle}}"
-    ></view>
-  </view>
-  <view
-    class="rayui-slider-thumb rayui-slider-thumb-end"
-    data-name="end"
-    bind:touchstart="{{computed.handleMouseDown(instanceId)}}"
-    bind:touchend="{{computed.onMouseUp(instanceId)}}"
-  >
-    <view 
+      bind:touchstart="{{computed.handleMouseDown(instanceId)}}"
+      bind:touchend="{{computed.onMouseUp(instanceId)}}"
+    >
+      <view 
+        data-name="start"
+        class="rayui-slider-thumb-render rayui-slider-thumb-start-render"
+      ></view>
+    </view>
+    <view
+      class="rayui-slider-thumb rayui-slider-thumb-end"
       data-name="end"
-      class="rayui-slider-thumb-render rayui-slider-thumb-end-render" style="{{thumbEndStyle}}"
-    ></view>
+      bind:touchstart="{{computed.handleMouseDown(instanceId)}}"
+      bind:touchend="{{computed.onMouseUp(instanceId)}}"
+    >
+      <view 
+        data-name="end"
+        class="rayui-slider-thumb-render rayui-slider-thumb-end-render" style="{{thumbStyle}}"
+      ></view>
+    </view>
   </view>
 </view>

package/lib/index.js

@@ -5,10 +5,10 @@ import "core-js/modules/es.array.slice.js";
 /* eslint-disable @typescript-eslint/no-unused-vars */
 import React, { useRef, useState, useEffect } from 'react';
 import { View, Text } from '@ray-js/ray';
+import Slider from '@ray-js/components-ty-slider/lib/slider';
 import { useDebounceFn, useThrottleFn } from 'ahooks';
 import { formatPercent } from './utils';
 import styles from './index.module.less';
-import Slider from './components/slider';
 import { defaultProps } from './props';
 function OpacitySlider(props) {
   var preValue = useRef(-1);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ray-js/lamp-style-slider",
-  "version": "0.0.2",
+  "version": "0.0.3-beta-2",
   "description": "照明样式的基础滑动条",
   "main": "lib/index",
   "files": [
@@ -8,13 +8,6 @@
   ],
   "license": "MIT",
   "types": "lib/index.d.ts",
-  "maintainers": [
-    "tuya_npm",
-    {
-      "name": "tuyafe",
-      "email": "tuyafe@tuya.com"
-    }
-  ],
   "scripts": {
     "lint": "eslint src --ext .js,.jsx,.ts,.tsx --fix",
     "build": "ray build --type=component",
@@ -65,5 +58,13 @@
       "git add"
     ]
   },
-  "dependencies": {}
+  "dependencies": {
+    "@ray-js/components-ty-slider": "0.2.36-beta-2"
+  },
+  "maintainers": [
+    {
+      "name": "tuyafe",
+      "email": "tuyafe@tuya.com"
+    }
+  ]
 }