feat: slider add some tokens (#1391)

packages/semi-foundation/slider/slider.scss

@@ -57,7 +57,7 @@ $module: #{$prefix}-slider;
         border-radius: 50%;
         cursor: pointer;
         transition: background-color $transition_duration_slider_handle-bg $transition_function-slider-handle-bg $transition_delay-slider_handle-bg;
-        transform: scale($transform_scale-slider_handle);
+        transform: $transform_scale-slider_handle translateX(-50%) translateY($spacing-slider_handle-translateY);
         &:focus-visible {
             outline: $width-slider_handle-focus solid $color-slider_handle-focus;
         }
@@ -101,6 +101,7 @@ $module: #{$prefix}-slider;
         //border: 1px solid $color-control-bg-default;
         border-radius: 50%;
         cursor: pointer;
+        transform: translateX($spacing-slider_dot-translateX);
     }
 
     &-dot-active {
@@ -196,6 +197,10 @@ $module: #{$prefix}-slider;
     .#{$module}-handle {
         margin-top: $spacing-slider_vertical_handle-marginTop;
         margin-left: $spacing-slider_vertical_handle-marginLeft;
+        transform: $transform_scale-slider_handle translateY(-50%) translateX($spacing-slider_vertical_handle-translateX);
+    }
+    .#{$module}-dot{
+        transform: translateY($spacing-slider_vertical_dot-translateY);
     }
 }
 

packages/semi-foundation/slider/variables.scss

@@ -18,26 +18,30 @@ $color-slider_handle-focus: var(--semi-color-primary-light-active); // 圆形按
 
 // Spacing
 $spacing-slider-paddingX: 13px; // 滑动条整体水平内边距
-$spacing-slider-paddingY: 0; // 滑动条整体垂直内边距
-$spacing-slider-margin: 0; // 滑动条整体外边距
-$spacing-slider_rail-margin: 0; // 滑动条轨道外边距
-$spacing-slider_rail-padding: 0; // 滑动条轨道内边距
+$spacing-slider-paddingY: 0px; // 滑动条整体垂直内边距
+$spacing-slider-margin: 0px; // 滑动条整体外边距
+$spacing-slider_rail-margin: 0px; // 滑动条轨道外边距
+$spacing-slider_rail-padding: 0px; // 滑动条轨道内边距
 $spacing-slider_rail-top: 14px; // 滑动条未填充轨道顶部距离
 $spacing-slider_handle-marginTop: 4px; // 滑动条圆形按钮顶部外边距
 $spacing-slider_track-top: 14px; // 滑动条已填充轨道顶部距离
 $spacing-slider_tooltip-top: -40px; // 滑动条工具提示顶部距离
 $spacing-slider_dot-top: 14px; // 滑动条圆形刻度点顶部距离
 $spacing-slider_marks-top: 23px; // 滑动条刻度标签顶部距离
-$spacing-slider_marks-left: 0; // 滑动条刻度标签左侧距离
+$spacing-slider_marks-left: 0px; // 滑动条刻度标签左侧距离
 $spacing-slider_boundary-top: 30px;
-$spacing-slider_boundary_min-left: 0;
-$spacing-slider_boundary_max-right: 0;
+$spacing-slider_boundary_min-left: 0px;
+$spacing-slider_boundary_max-right: 0px;
 $spacing-slider_vertical_marks-marginTop: -30px; // 垂直滑动条刻度标签顶部外边距
 $spacing-slider_vertical_marks-marginLeft: 29px; // 垂直滑动条刻度标签左侧外边距
 $spacing-slider_vertical_marks-reverse-marginLeft: -26px; // 垂直滑动条刻度标签左侧外边距（标签在左侧时）
-$spacing-slider_vertical_rail-top: 0; // 垂直滑动条轨道顶部距离
-$spacing-slider_vertical_handle-marginTop: 0; // 垂直滑动条原型按钮顶部外边距
+$spacing-slider_vertical_rail-top: 0px; // 垂直滑动条轨道顶部距离
+$spacing-slider_vertical_handle-marginTop: 0px; // 垂直滑动条原型按钮顶部外边距
 $spacing-slider_vertical_handle-marginLeft: -10px; // 垂直滑动条原型按钮左侧外边距
+$spacing-slider_handle-translateY: 0px; //  水平滑动条原型按钮垂直偏移量
+$spacing-slider_vertical_handle-translateX: 0px; // 垂直滑动条原型按钮水平偏移量
+$spacing-slider_dot-translateX: 0px; //  水平滑动条圆形刻度点水平偏移量
+$spacing-slider_vertical_dot-translateY: 0px; // 垂直滑动条圆形刻度点垂直偏移量
 
 // Radius
 $radius-slider_rail: var(--semi-border-radius-small); // 滚动条未填充轨道圆角

packages/semi-ui/slider/index.tsx

@@ -296,7 +296,6 @@ export default class Slider extends BaseComponent<SliderProps, SliderState> {
             tipFormatter,
             range
         );
-        const transform = { top: 'translateY(-50%)', left: 'translateX(-50%)' };
         const minClass = cls(cssClasses.HANDLE, {
             [`${cssClasses.HANDLE}-clicked`]: chooseMovePos === 'min' && isDrag,
         });
@@ -328,7 +327,6 @@ export default class Slider extends BaseComponent<SliderProps, SliderState> {
                     style={{
                         [stylePos]: `${minPercent * 100}%`,
                         zIndex: chooseMovePos === 'min' && isDrag ? 2 : 1,
-                        transform: transform[stylePos],
                     }}
                     onMouseDown={e => {
                         this.foundation.onHandleDown(e, 'min');
@@ -385,7 +383,6 @@ export default class Slider extends BaseComponent<SliderProps, SliderState> {
                         style={{
                             [stylePos]: `${minPercent * 100}%`,
                             zIndex: chooseMovePos === 'min' ? 2 : 1,
-                            transform: transform[stylePos],
                         }}
                         onMouseDown={e => {
                             this.foundation.onHandleDown(e, 'min');
@@ -440,7 +437,6 @@ export default class Slider extends BaseComponent<SliderProps, SliderState> {
                         style={{
                             [stylePos]: `${maxPercent * 100}%`,
                             zIndex: chooseMovePos === 'max' ? 2 : 1,
-                            transform: transform[stylePos],
                         }}
                         onMouseDown={e => {
                             this.foundation.onHandleDown(e, 'max');