diff --git a/packages/components/slider/demo/Marks.vue b/packages/components/slider/demo/Marks.vue
index e6a479aea..2646b15de 100644
--- a/packages/components/slider/demo/Marks.vue
+++ b/packages/components/slider/demo/Marks.vue
@@ -1,9 +1,11 @@
marks & step
-
+
step=null
-
+
+
+ Disabled:
diff --git a/packages/components/slider/docs/Theme.zh.md b/packages/components/slider/docs/Theme.zh.md
index c50957503..fdd7cdb10 100644
--- 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
index 471b38687..b45cfa9e5 100644
--- 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
index f62826fac..f5cc85241 100644
--- 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
index 4d271825a..0d292a2e3 100644
--- 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;