From 1ab9dd4c9faa79bcf6df75692878bb4c01eadcce Mon Sep 17 00:00:00 2001
From: luoxiaozero <48741584+luoxiaozero@users.noreply.github.com>
Date: Thu, 5 Sep 2024 11:08:36 +0800
Subject: [PATCH] Fix/slider label position (#250)

* fix: Slider labels all stacked to the left with Firefox

* perf: Slider focus-within
---
 thaw/src/slider/mod.rs          |  6 ++----
 thaw/src/slider/slider.css      | 13 +++++++++++++
 thaw/src/slider/slider_label.rs |  4 ++--
 3 files changed, 17 insertions(+), 6 deletions(-)

diff --git a/thaw/src/slider/mod.rs b/thaw/src/slider/mod.rs
index 2d6d80e..3b1d7df 100644
--- a/thaw/src/slider/mod.rs
+++ b/thaw/src/slider/mod.rs
@@ -37,7 +37,6 @@ pub fn Slider(
     let (id, name) = FieldInjection::use_id_and_name(id, name);
     let validate = Rule::validate(rules, value, name);
     let is_chldren = children.is_some();
-    let list_id = is_chldren.then(|| uuid::Uuid::new_v4().to_string());
     let current_value = Memo::new(move |_| {
         let max = max.get();
         let min = min.get();
@@ -100,14 +99,13 @@ pub fn Slider(
                     on:input=on_input
                     value=current_value.get_untracked()
                     prop:value=move || current_value.get()
-                    list=list_id.clone()
                 />
                 <div class="thaw-slider__rail"></div>
                 <div class="thaw-slider__thumb"></div>
                 <OptionComp value=children let:children>
-                    <datalist id=list_id class="thaw-slider__datalist">
+                    <div class="thaw-slider__datalist">
                         {children()}
-                    </datalist>
+                    </div>
                 </OptionComp>
             </div>
         </Provider>
diff --git a/thaw/src/slider/slider.css b/thaw/src/slider/slider.css
index afa6a74..69e2503 100644
--- a/thaw/src/slider/slider.css
+++ b/thaw/src/slider/slider.css
@@ -33,6 +33,19 @@
     outline-style: none;
 }
 
+.thaw-slider:focus-within::after {
+    content: "";
+    position: absolute;
+    bottom: calc(0px);
+    left: calc(-10px);
+    right: calc(-10px);
+    top: calc(0px);
+    z-index: 1;
+    pointer-events: none;
+    border-radius: var(--borderRadiusMedium);
+    border: 2px solid var(--colorStrokeFocus2);
+}
+
 .thaw-slider__input {
     grid-column-end: -1;
     grid-column-start: 1;
diff --git a/thaw/src/slider/slider_label.rs b/thaw/src/slider/slider_label.rs
index 248b149..6eb7c0f 100644
--- a/thaw/src/slider/slider_label.rs
+++ b/thaw/src/slider/slider_label.rs
@@ -20,9 +20,9 @@ pub fn SliderLabel(
     };
 
     view! {
-        <option class=class_list!["thaw-slider-label", class] style=style value=move || value.get()>
+        <div class=class_list!["thaw-slider-label", class] style=style>
 
             {children()}
-        </option>
+        </div>
     }
 }