feat(widgets): 🎸 Added the widget of Slider

CHANGELOG.md

@@ -27,11 +27,13 @@ Please only add new entries below the [Unreleased](#unreleased---releasedate) he
 
 ### Features
 
-- **core**: Added `grab_pointer` to grabs all the pointer input. (#pr @wjian23)
+- **core**: Added `grab_pointer` to grabs all the pointer input. (#669 @wjian23)
+- **widgets**: Added the widget of Slider (#669 @wjian23)
 
 ### Fixed
-- **core**: fix mismatch of providers. (#pr @wjian23)
-- **core**: Added DeclarerWithSubscription to let Widget `Expanded` accept pipe value. (#pr @wjian23)
+
+- **core**: fix mismatch of providers. (#669 @wjian23)
+- **core**: Added DeclarerWithSubscription to let Widget `Expanded` accept pipe value. (#669 @wjian23)
 
 ## [0.4.0-alpha.18] - 2024-12-11
 

themes/material/src/classes.rs

@@ -4,6 +4,7 @@ mod checkbox_cls;
 mod progress_cls;
 mod radio_cls;
 mod scrollbar_cls;
+mod slider_cls;
 mod tooltips_cls;
 
 pub fn initd_classes() -> Classes {
@@ -14,6 +15,7 @@ pub fn initd_classes() -> Classes {
   progress_cls::init(&mut classes);
   checkbox_cls::init(&mut classes);
   tooltips_cls::init(&mut classes);
+  slider_cls::init(&mut classes);
 
   classes
 }

themes/material/src/classes/slider_cls.rs

@@ -0,0 +1,137 @@
+use ribir_core::prelude::*;
+use ribir_widgets::prelude::*;
+
+use crate::md;
+
+const INDICATOR_HEIGHT: f32 = 44.;
+const TRACK_HEIGHT: f32 = 16.;
+const TRACK_WIDTH: f32 = 4.;
+
+const SMALL_RADIUS: f32 = 2.;
+const LARGE_RADIUS: f32 = 8.;
+const STOP_INDICATOR_MARGIN: EdgeInsets = EdgeInsets::horizontal(6.);
+const STOP_INDICATOR_SIZE: Size = Size::new(4., 4.);
+
+class_names! {
+  BASE_SLIDER_TRACK,
+}
+
+macro_rules! stop_indicator_class {
+  ($($field: ident: $value: expr),* ) => {
+    style_class! {
+      v_align: VAlign::Center,
+      border_radius: Radius::all(SMALL_RADIUS),
+      margin: STOP_INDICATOR_MARGIN,
+      clamp: BoxClamp::fixed_size(STOP_INDICATOR_SIZE),
+      $($field: $value),*
+    }
+  };
+}
+
+pub(super) fn init(classes: &mut Classes) {
+  classes.insert(BASE_SLIDER_TRACK, |w| {
+    fn_widget! {
+      let flex = Provider::of::<Stateful<Expanded>>(BuildCtx::get()).unwrap();
+      part_writer!(&mut flex.flex).transition(
+        EasingTransition {
+          easing: easing::LinearEasing,
+          duration: md::easing::duration::SHORT2,
+      });
+      let w = FatObj::new(w);
+      @ $w {
+        clamp: BoxClamp::fixed_height(TRACK_HEIGHT),
+      }
+    }
+    .into_widget()
+  });
+
+  classes.insert(
+    SLIDER_CONTAINER,
+    style_class!(
+      clamp: BoxClamp::fixed_height(INDICATOR_HEIGHT)
+    ),
+  );
+  classes.insert(SLIDER_ACTIVE_TRACK, |w| {
+    fn_widget! {
+      let w = FatObj::new(w);
+      @ $w {
+        class: BASE_SLIDER_TRACK,
+        background: Palette::of(BuildCtx::get()).primary(),
+        border_radius: Radius::new(LARGE_RADIUS, SMALL_RADIUS, LARGE_RADIUS, SMALL_RADIUS),
+      }
+    }
+    .into_widget()
+  });
+
+  classes.insert(SLIDER_INACTIVE_TRACK, |w| {
+    fn_widget! {
+      let w = FatObj::new(w);
+      @ $w {
+        class: BASE_SLIDER_TRACK,
+        background: Palette::of(BuildCtx::get()).secondary_container(),
+        border_radius: Radius::new(SMALL_RADIUS, LARGE_RADIUS, SMALL_RADIUS, LARGE_RADIUS),
+      }
+    }
+    .into_widget()
+  });
+
+  classes.insert(SLIDER_INDICATOR, |w| {
+    fn_widget! {
+      let w = FatObj::new(w);
+      @ Cursor {
+        cursor: CursorIcon::Pointer,
+        @ $w {
+          v_align: VAlign::Center,
+          background: Palette::of(BuildCtx::get()).primary(),
+          margin: EdgeInsets::horizontal(6.),
+          clamp: BoxClamp::fixed_size(Size::new(TRACK_WIDTH, INDICATOR_HEIGHT)),
+        }
+      }
+    }
+    .into_widget()
+  });
+
+  classes.insert(RANGE_SLIDER_INACTIVE_TRACK_LEFT, |w| {
+    fn_widget! {
+      let w = FatObj::new(w);
+        @ $w {
+          class: BASE_SLIDER_TRACK,
+          border_radius: Radius::new(LARGE_RADIUS, SMALL_RADIUS, LARGE_RADIUS, SMALL_RADIUS),
+          background: Palette::of(BuildCtx::get()).secondary_container(),
+        }
+    }
+    .into_widget()
+  });
+
+  classes.insert(RANGE_SLIDER_INACTIVE_TRACK_RIGHT, |w| {
+    fn_widget! {
+      let w = FatObj::new(w);
+        @ $w {
+          class: BASE_SLIDER_TRACK,
+          border_radius: Radius::new(SMALL_RADIUS, LARGE_RADIUS, SMALL_RADIUS, LARGE_RADIUS,),
+          background: Palette::of(BuildCtx::get()).secondary_container(),
+        }
+    }
+    .into_widget()
+  });
+
+  classes.insert(RANGE_SLIDER_ACTIVE_TRACK, |w| {
+    fn_widget! {
+      let w = FatObj::new(w);
+        @ $w {
+          class: BASE_SLIDER_TRACK,
+          border_radius: Radius::all(SMALL_RADIUS),
+          background: Palette::of(BuildCtx::get()).primary(),
+        }
+    }
+    .into_widget()
+  });
+
+  classes.insert(STOP_INDICATOR_ACTIVE, stop_indicator_class! {
+    background: Palette::of(BuildCtx::get()).on_primary()
+  });
+
+  classes.insert(STOP_INDICATOR_INACTIVE, stop_indicator_class! {
+    background: Palette::of(BuildCtx::get()).on_secondary_container()
+  });
+}

widgets/src/lib.rs

@@ -14,6 +14,7 @@ pub mod path;
 pub mod progress;
 pub mod radio;
 pub mod scrollbar;
+pub mod slider;
 pub mod tabs;
 pub mod text_field;
 
@@ -22,6 +23,6 @@ pub mod prelude {
   pub use super::{
     avatar::*, buttons::*, checkbox::*, common_widget::*, divider::*, grid_view::*, icon::*,
     input::*, label::*, layout::*, link::*, lists::*, path::*, progress::*, radio::*, scrollbar::*,
-    tabs::*, text_field::*, transform_box::*,
+    slider::*, tabs::*, text_field::*, transform_box::*,
   };
 }