Fix/slider label position (#250)

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

* perf: Slider focus-within

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>

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;

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>
     }
 }