From 370e36393ce987bd8177de60c3947a9ad640efb9 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=BE=90=E6=B6=9B?= <midnite@outlook.com>
Date: Tue, 31 Dec 2024 09:19:58 +0800
Subject: [PATCH] =?UTF-8?q?=E8=B0=83=E6=95=B4ColorPicker=E7=9A=84Range?=
 =?UTF-8?q?=E8=BE=93=E5=85=A5=E7=BB=84=E4=BB=B6=E7=9A=84=E9=BB=98=E8=AE=A4?=
 =?UTF-8?q?=E6=A0=B7=E5=BC=8F=E3=80=82?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/component.css | 38 ++++++++++++++++++++++++++++++++++++++
 1 file changed, 38 insertions(+)

diff --git a/src/component.css b/src/component.css
index e368e5e..3e50019 100644
--- a/src/component.css
+++ b/src/component.css
@@ -347,4 +347,42 @@
       }
     }
   }
+
+  /* 颜色选择器滑杆 */
+  input[type='range'].picker {
+    -webkit-appearance: none;
+    width: 100%;
+    height: 1em;
+    background: transparent;
+    &::-webkit-slider-thumb {
+      -webkit-appearance: none;
+      appearance: none;
+      width: 1em;
+      height: 1em;
+      background: oklch(from var(--color-primary) l c h / 70%);
+      border-radius: var(--border-radius-xxs);
+      cursor: pointer;
+    }
+    &::-moz-range-thumb {
+      width: 1em;
+      height: 1em;
+      background: oklch(from var(--color-primary) l c h / 70%);
+      border-radius: var(--border-radius-xxs);
+      cursor: pointer;
+    }
+    &::-webkit-slider-runnable-track {
+      width: 100%;
+      height: 1em;
+      cursor: pointer;
+      background: transparent;
+      border-radius: var(--border-radius-xxs);
+    }
+    &::-moz-range-track {
+      width: 100%;
+      height: 1em;
+      cursor: pointer;
+      background: transparent;
+      border-radius: var(--border-radius-xxs);
+    }
+  }
 }