fix(comp:slider): slider marker color error when disabled (#1457)

IDuxFE · Feb 23, 2023 · d215935 · d215935
1 parent 8c65c6c
commit d215935
Show file tree

Hide file tree

Showing 5 changed files with 14 additions and 12 deletions.
diff --git a/packages/components/slider/demo/Marks.vue b/packages/components/slider/demo/Marks.vue
@@ -1,9 +1,11 @@
 <template>
   <h4>marks & step</h4>
-  <IxSlider v-model:value="value0" :marks="marks"></IxSlider>
+  <IxSlider v-model:value="value0" :disabled="isDisabled" :marks="marks"></IxSlider>
 
   <h4>step=null</h4>
-  <IxSlider v-model:value="value1" :marks="marks" :step="null"></IxSlider>
+  <IxSlider v-model:value="value1" :disabled="isDisabled" :marks="marks" :step="null"></IxSlider>
+
+  Disabled: <IxSwitch v-model:checked="isDisabled"></IxSwitch>
 </template>
 
 <script setup lang="ts">
@@ -23,4 +25,5 @@ const marks = {
 
 const value0 = ref(30)
 const value1 = ref(50)
+const isDisabled = ref(false)
 </script>
diff --git a/packages/components/slider/docs/Theme.zh.md b/packages/components/slider/docs/Theme.zh.md
@@ -16,7 +16,7 @@
 | `@slider-track-disabled-background-color` | `rgba(0, 0, 0, 0.251)` | `@color-graphite` | - |
 | `@slider-thumb-disabled-background-color` | `@color-white` | - | - |
 | `@slider-thumb-disabled-border-color` | `rgba(0, 0, 0, 0.251)` | `@color-graphite` | - |
-| `@slider-dot-disabled-active-border-color` | `rgba(0, 0, 0, 0.251)` | `@color-graphite` | - |
+| `@slider-dot-disabled-active-background-color` | `rgba(0, 0, 0, 0.251)` | `@color-graphite` | - |
 | `@slider-thumb-width` | `10px` | - | - |
 | `@slider-thumb-height` | `10px` | - | - |
 | `@slider-thumb-margin-top` | `-3px` | - | - |

diff --git a/packages/components/slider/style/index.less b/packages/components/slider/style/index.less
@@ -16,14 +16,17 @@
   touch-action: none;
 
   &:not(&-disabled) {
-    &:hover &-rail {
+    &:hover .@{slider-prefix}-rail {
       background-color: @slider-rail-hover-background-color;
     }
 
-    &:hover &-track {
+    &:hover .@{slider-prefix}-track {
       background-color: @slider-track-hover-background-color;
     }
 
+    .@{slider-prefix}-dot-active {
+      background-color: @slider-dot-active-background-color;
+    }
   }
 
   &-rail {
@@ -57,10 +60,6 @@
     &:last-child {
       margin-left: -1px;
     }
-
-    &-active {
-      background-color: @slider-dot-active-background-color;
-    }
   }
 
   &-thumb {
@@ -179,7 +178,7 @@
       cursor: not-allowed;
 
       &-active {
-        border-color: @slider-dot-disabled-active-border-color;
+        background-color: @slider-dot-disabled-active-background-color;
       }
     }
 

diff --git a/packages/components/slider/style/themes/default.variable.less b/packages/components/slider/style/themes/default.variable.less
@@ -20,7 +20,7 @@
 @slider-track-disabled-background-color: rgba(0, 0, 0, 0.251);
 @slider-thumb-disabled-background-color: @color-white;
 @slider-thumb-disabled-border-color: rgba(0, 0, 0, 0.251);
-@slider-dot-disabled-active-border-color: rgba(0, 0, 0, 0.251);
+@slider-dot-disabled-active-background-color: rgba(0, 0, 0, 0.251);
 
 @slider-thumb-width: 10px;
 @slider-thumb-height: 10px;

diff --git a/packages/components/slider/style/themes/seer.variable.less b/packages/components/slider/style/themes/seer.variable.less
@@ -1,7 +1,7 @@
 @import 'default.variable.less';
 
 @slider-track-disabled-background-color: @color-graphite;
-@slider-dot-disabled-active-border-color: @color-graphite;
+@slider-dot-disabled-active-background-color: @color-graphite;
 @slider-thumb-disabled-border-color: @color-graphite;
 
 @slider-dot-background-color: @color-graphite-l30;