fix(Slider): fix disabled style error (#2814)

Author: anlyyao

src/common/style/theme/_components.less

@@ -6,5 +6,8 @@
   page {
     --td-button-primary-disabled-color: var(--td-font-white-4);
     --td-skeleton-animation-gradient: rgba(255, 255, 255, 6%);
+    --td-slider-dot-bg-color: var(--td-gray-color-4);
+    --td-slider-dot-disabled-bg-color: var(--td-gray-color-11);
+    --td-slider-dot-disabled-border-color: var(--td-gray-color-12);
   }
 }

src/slider/README.en-US.md

@@ -35,13 +35,18 @@ Name | Default Value | Description
 -- | -- | --
 --td-slider-active-color | @brand-color | - 
 --td-slider-bar-height | 8rpx | - 
+--td-slider-bar-width | 8rpx | - 
 --td-slider-capsule-bar-color | @bg-color-component | - 
 --td-slider-capsule-bar-heihgt | 48rpx | - 
+--td-slider-capsule-bar-width | 48rpx | - 
 --td-slider-capsule-line-heihgt | 36rpx | - 
+--td-slider-default-color | @bg-color-component | - 
 --td-slider-default-color | @bg-color-component-disabled | - 
---td-slider-default-color | @bg-color-secondarycomponent | - 
 --td-slider-disabled-color | @brand-color-disabled | - 
---td-slider-disabled-text-color | @font-gray-4 | - 
---td-slider-dot-bg-color | @bg-color-container | - 
---td-slider-dot-color | @bg-color-secondarycontainer | - 
+--td-slider-disabled-text-color | @text-color-disabled | - 
+--td-slider-dot-bg-color | #fff | - 
+--td-slider-dot-color | @component-border | - 
+--td-slider-dot-disabled-bg-color | #fff | - 
+--td-slider-dot-disabled-color | #f3f3f3 | - 
 --td-slider-dot-size | 40rpx | - 
+--td-slider-text-color | @text-color-primary | - 

src/slider/README.md

@@ -113,16 +113,19 @@ $slider.init();
 名称 | 默认值 | 描述 
 -- | -- | --
 --td-slider-active-color | @brand-color | - 
---td-slider-bar-height | 8rpx | vertical为true时默认为400rpx
---td-slider-bar-width | 8rpx | vertical为true时有效
+--td-slider-bar-height | 8rpx | vertical为true时默认为400rpx 
+--td-slider-bar-width | 8rpx | vertical为true时有效 
 --td-slider-capsule-bar-color | @bg-color-component | - 
 --td-slider-capsule-bar-heihgt | 48rpx | - 
---td-slider-capsule-bar-width | 48rpx | vertical为true时有效
+--td-slider-capsule-bar-width | 48rpx | vertical为true时有效 
 --td-slider-capsule-line-heihgt | 36rpx | - 
+--td-slider-default-color | @bg-color-component | - 
 --td-slider-default-color | @bg-color-component-disabled | - 
---td-slider-default-color | @bg-color-secondarycomponent | - 
 --td-slider-disabled-color | @brand-color-disabled | - 
---td-slider-disabled-text-color | @font-gray-4 | - 
---td-slider-dot-bg-color | @bg-color-container | - 
---td-slider-dot-color | @bg-color-secondarycontainer | - 
+--td-slider-disabled-text-color | @text-color-disabled | - 
+--td-slider-dot-bg-color | #fff | - 
+--td-slider-dot-color | @component-border | - 
+--td-slider-dot-disabled-bg-color | #fff | - 
+--td-slider-dot-disabled-color | #f3f3f3 | - 
 --td-slider-dot-size | 40rpx | - 
+--td-slider-text-color | @text-color-primary | - 

src/slider/slider.less

@@ -5,8 +5,10 @@
 @slider-bar-width: var(--td-slider-bar-width, 8rpx);
 @slider-bar-height: var(--td-slider-bar-height, 8rpx);
 @slider-dot-bg-color: var(--td-slider-dot-bg-color, #fff);
+@slider-dot-disabled-bg-color: var(--td-slider-dot-disabled-bg-color, #fff);
 @slider-dot-size: var(--td-slider-dot-size, 40rpx);
-@slider-dot-color: var(--td-slider-dot-color, @component-border);
+@slider-dot-border-color: var(--td-slider-dot-color, @component-border);
+@slider-dot-disabled-border-color: var(--td-slider-dot-disabled-border-color, #f3f3f3);
 @slider-default-color: var(--td-slider-default-color, @bg-color-component);
 @slider-default-disabled-color: var(--td-slider-default-color, @bg-color-component-disabled);
 @slider-active-color: var(--td-slider-active-color, @brand-color);
@@ -32,6 +34,11 @@
     .@{slider}__scale-desc {
       color: @slider-disabled-text-color;
     }
+
+    .@{slider}__dot {
+      background-color: @slider-dot-disabled-bg-color;
+      border-color: @slider-dot-disabled-border-color;
+    }
   }
 
   &--top {
@@ -61,7 +68,7 @@
 
   &__dot {
     border-radius: 50%;
-    border: 2rpx solid @slider-dot-color;
+    border: 2rpx solid @slider-dot-border-color;
     position: absolute;
     top: 50%;
     right: 0;