feat: update slider css

components/slider/style/index.less

@@ -24,7 +24,7 @@
     width: 100%;
     height: 4px;
     background-color: @slider-rail-background-color;
-    border-radius: @border-radius-sm;
+    border-radius: @border-radius-base;
     transition: background-color 0.3s;
   }
 
@@ -38,9 +38,9 @@
 
   &-handle {
     position: absolute;
-    width: 14px;
-    height: 14px;
-    margin-top: -5px;
+    width: @slider-handle-size;
+    height: @slider-handle-size;
+    margin-top: @slider-handle-margin-top;
     background-color: @slider-handle-background-color;
     border: solid @slider-handle-border-width @slider-handle-color;
     border-radius: 50%;
@@ -49,6 +49,11 @@
     transition: border-color 0.3s, box-shadow 0.6s,
       transform 0.3s cubic-bezier(0.18, 0.89, 0.32, 1.28);
 
+    &-dragging&-dragging&-dragging {
+      border-color: @slider-handle-color-focus;
+      box-shadow: 0 0 0 5px @slider-handle-color-focus-shadow;
+    }
+
     &:focus {
       border-color: @slider-handle-color-focus;
       outline: none;
@@ -87,6 +92,7 @@
     text-align: center;
     word-break: keep-all;
     cursor: pointer;
+    user-select: none;
 
     &-active {
       color: @text-color;
@@ -110,6 +116,7 @@
     border: 2px solid @slider-dot-border-color;
     border-radius: 50%;
     cursor: pointer;
+
     &:first-child {
       margin-left: -4px;
     }
@@ -160,7 +167,7 @@
     }
 
     .@{slider-prefix-cls}-handle {
-      margin-top: -6px;
+      margin-top: -6px; // we chould consider border width as well: (10 + 2 ) / 2
       margin-left: -5px;
     }
 
@@ -195,3 +202,5 @@
     }
   }
 }
+
+@import './rtl';

components/style/themes/default.less

@@ -751,7 +751,7 @@
 
 // Slider
 // ---
-@slider-margin: 14px 6px 10px;
+@slider-margin: 10px 6px 10px;
 @slider-rail-background-color: @background-color-base;
 @slider-rail-background-color-hover: #e1e1e1;
 @slider-track-background-color: @primary-3;
@@ -761,8 +761,10 @@
 @slider-handle-color: @primary-3;
 @slider-handle-color-hover: @primary-4;
 @slider-handle-color-focus: tint(@primary-color, 20%);
-@slider-handle-color-focus-shadow: fade(@primary-color, 20%);
+@slider-handle-color-focus-shadow: fade(@primary-color, 12%);
 @slider-handle-color-tooltip-open: @primary-color;
+@slider-handle-size: 14px;
+@slider-handle-margin-top: -5px;
 @slider-handle-shadow: 0;
 @slider-dot-border-color: @border-color-split;
 @slider-dot-border-color-active: tint(@primary-color, 50%);