feat: handle color prop

freddie-nelson · Oct 4, 2024 · 35df99a · 35df99a
1 parent ed2cd83
commit 35df99a
Show file tree

Hide file tree

Showing 3 changed files with 14 additions and 1 deletion.
diff --git a/dev/serve.vue b/dev/serve.vue
@@ -34,6 +34,7 @@ export default defineComponent({
       flipTooltip: false,
       customSliderStepsText: "",
       tooltipStylesText: "{}",
+      handleColor: "",
     };
   },
   computed: {
@@ -294,6 +295,11 @@ export default defineComponent({
         <input type="text" name="tooltipStylesText" v-model="tooltipStylesText" />
       </div>
 
+      <div class="item">
+        <h2>handle color:</h2>
+        <input type="text" name="handleColor" v-model="handleColor" />
+      </div>
+
       <button @click="sliderVal += 10">Add 10 to slider value</button>
       <button @click="sliderVal -= 10">Minus 10 from slider value</button>
     </div>
@@ -328,6 +334,7 @@ export default defineComponent({
     :disabled="disabled"
     :customSliderSteps="customSliderSteps"
     :tooltipStyles="tooltipStyles"
+    :handleColor="handleColor"
   />
   <h1>{{ sliderVal }}</h1>
 </template>

diff --git a/src/props.ts b/src/props.ts
@@ -4,6 +4,7 @@ export type Props = Readonly<{
   width: string;
   height: number;
   handleScale: number;
+  handleColor?: string;
   alwaysShowHandle: boolean;
   color: string;
   trackColor: string;
@@ -43,6 +44,10 @@ export default {
     type: Number,
     default: 1.35,
   },
+  handleColor: {
+    type: String,
+    default: undefined,
+  },
   alwaysShowHandle: {
     type: Boolean,
     default: false,

diff --git a/src/vue3-slider.vue b/src/vue3-slider.vue
@@ -133,6 +133,7 @@ export default defineComponent({
         "--tooltip-color": props.tooltipColor,
         "--tooltip-text-color": props.tooltipTextColor,
         "--handle-scale": props.handleScale,
+        "--handle-color": props.handleColor || props.color,
       };
     });
 
@@ -487,7 +488,7 @@ export default defineComponent({
     width: var(--height, 6px);
     height: var(--height, 6px);
     border-radius: calc(var(--height, 6px) / 2);
-    background-color: var(--color, #fb2727);
+    background-color: var(--handle-color, #fb2727);
     transform: scale(0);
     transition: transform 0.2s ease;
     user-select: none;