✨ feat: slider component ameliorate

Cargo.toml

@@ -18,6 +18,7 @@ stylers = "0.3.1"
 web-sys = "0.3.61"
 leptos_dom = { version = "0.2.5" }
 leptos-icons = { git = "https://github.com/Carlosted/leptos-icons.git", features = ["AiCloseOutlined", "AiCheckOutlined"] }
+wasm-bindgen = "0.2.84"
 
 [workspace]
 members = ["examples/basic"]

src/slider/mod.rs

@@ -1,4 +1,8 @@
-use crate::{theme::use_theme, utils::mount_style::mount_style, Theme};
+use crate::{
+    theme::use_theme,
+    utils::{dom::window_event_listener, mount_style::mount_style},
+    Theme,
+};
 use leptos::*;
 use stylers::style_sheet_str;
 
@@ -30,12 +34,27 @@ pub fn Slider(
     });
     let class_name = mount_style("slider", || style_sheet_str!("./src/slider/slider.css"));
 
+    let rail_ref = create_node_ref::<html::Div>(cx);
+    let (is_mouse_move, set_mouse_move) = create_signal(cx, false);
+    let on_mouse_down = move |_| {
+        set_mouse_move.set(true);
+    };
+
+    let on_mouse_move = window_event_listener("mousemove", move |_| {
+        if is_mouse_move.get() {
+            rail_ref.on_load(cx, move |rail| {
+                // rail.get_bounding_client_rect();
+            });
+        }
+    });
+    on_cleanup(cx, on_mouse_move);
+
     view! {cx, class=class_name,
         <div class="melt-slider" style=move || css_vars.get()>
             <div class="melt-slider-rail">
                 <div class="melt-slider-rail__fill" style=move || format!("width: {}%", percentage.get())></div>
             </div>
-            <div class="melt-slider-handle" style=move || format!("left: {}%; transform: translateX(-{}%)", percentage.get(), percentage.get())>
+            <div on:mousedown=on_mouse_down class="melt-slider-handle" style=move || format!("left: {}%; transform: translateX(-{}%)", percentage.get(), percentage.get())>
             </div>
         </div>
     }

src/utils/dom.rs

@@ -0,0 +1,16 @@
+use leptos::window;
+use wasm_bindgen::{prelude::Closure, JsCast};
+
+pub fn window_event_listener<'a>(
+    event_name: &'a str,
+    cb: impl Fn(web_sys::Event) + 'static,
+) -> impl FnOnce() -> () + 'a {
+    let handler = Box::new(cb) as Box<dyn FnMut(web_sys::Event)>;
+
+    let cb = Closure::wrap(handler).into_js_value();
+    _ = window().add_event_listener_with_callback(event_name, cb.unchecked_ref());
+
+    move || {
+        _ = window().remove_event_listener_with_callback(event_name, cb.unchecked_ref());
+    }
+}

src/utils/mod.rs

@@ -1 +1,2 @@
 pub(crate) mod mount_style;
+pub mod dom;