fix(slider): add cursor

varletjs · Mar 14, 2023 · dd82f92 · dd82f92
1 parent 9adfdca
commit dd82f92
Show file tree

Hide file tree

Showing 2 changed files with 4 additions and 2 deletions.
diff --git a/packages/varlet-ui/src/slider/Slider.vue b/packages/varlet-ui/src/slider/Slider.vue
@@ -38,6 +38,7 @@
           ></div>
           <div
             :class="classes(n('thumb-ripple'), [thumbsProps[item.enumValue].active, n('thumb-ripple--active')])"
+            v-hover:desktop="(value) => hover(value, item)"
             :style="{
               background: thumbsProps[item.enumValue].active ? thumbColor : undefined,
             }"

diff --git a/packages/varlet-ui/src/slider/slider.less b/packages/varlet-ui/src/slider/slider.less
@@ -53,6 +53,7 @@
 
   &__thumb {
     position: absolute;
+    cursor: pointer;
 
     &-block {
       position: absolute;
@@ -61,14 +62,14 @@
       border-radius: 50%;
       transform: translate(-50%, -50%);
       transition: background-color 0.25s;
+      z-index: 1;
       background-color: var(--slider-thumb-block-background);
     }
 
     &-ripple {
       position: absolute;
       width: 36px;
       height: 36px;
-      z-index: -1;
       left: 50%;
       top: 50%;
       transform: translate(-50%, -50%);
@@ -128,7 +129,7 @@
         background-color: var(--slider-error-color) !important;
       }
 
-      &-ripple {
+      &-ripple--active {
         background-color: var(--slider-error-color) !important;
       }