3 files changed, 74 insertions, 2 deletions
diff --git a/crates/material_theme/src/lib.rs b/crates/material_theme/src/lib.rs
index a9beb2a..03f1ca5 100644
--- a/crates/material_theme/src/lib.rs
+++ b/crates/material_theme/src/lib.rs
@@ -18,6 +18,7 @@ pub mod progress_bar;
 pub mod qr_code;
 pub mod radio;
 pub mod scrollable;
+pub mod slider;
 #[cfg(feature = "svg")]
 pub mod svg;
 pub mod text;
diff --git a/crates/material_theme/src/slider.rs b/crates/material_theme/src/slider.rs
new file mode 100644
index 0000000..cc3bf98
--- /dev/null
+++ b/crates/material_theme/src/slider.rs
@@ -0,0 +1,63 @@
+use iced_widget::core::{Background, Color, border};
+use iced_widget::slider::{
+    Catalog, Handle, HandleShape, Rail, Status, Style, StyleFn,
+};
+
+use super::Theme;
+use crate::utils::{HOVERED_LAYER_OPACITY, PRESSED_LAYER_OPACITY, mix};
+
+impl Catalog for Theme {
+    type Class<'a> = StyleFn<'a, Self>;
+
+    fn default<'a>() -> <Self as Catalog>::Class<'a> {
+        Box::new(default)
+    }
+
+    fn style(
+        &self,
+        class: &<Self as Catalog>::Class<'_>,
+        status: Status,
+    ) -> Style {
+        class(self, status)
+    }
+}
+
+pub fn styled(left: Color, right: Color, handle_radius: f32) -> Style {
+    Style {
+        rail: Rail {
+            backgrounds: (left.into(), right.into()),
+            width: 8.0,
+            border: border::rounded(400),
+        },
+        handle: Handle {
+            shape: HandleShape::Circle {
+                radius: handle_radius,
+            },
+            background: Background::Color(left),
+            border_width: 0.0,
+            border_color: Color::TRANSPARENT,
+        },
+    }
+}
+
+pub fn default(theme: &Theme, status: Status) -> Style {
+    let surface = theme.colorscheme.surface;
+    let primary = theme.colorscheme.primary;
+    let secondary = theme.colorscheme.secondary;
+
+    match status {
+        Status::Active => {
+            styled(primary.color, secondary.secondary_container, 16.0)
+        }
+        Status::Hovered => styled(
+            mix(primary.color, surface.on_surface, HOVERED_LAYER_OPACITY),
+            secondary.secondary_container,
+            16.0,
+        ),
+        Status::Dragged => styled(
+            mix(primary.color, surface.on_surface, PRESSED_LAYER_OPACITY),
+            secondary.secondary_container,
+            15.0,
+        ),
+    }
+}
diff --git a/theme_test/src/main.rs b/theme_test/src/main.rs
index 9aab2fe..c13bde7 100644
--- a/theme_test/src/main.rs
+++ b/theme_test/src/main.rs
@@ -1,8 +1,9 @@
-use iced::Element;
 use iced::Length::Fill;
 use iced::widget::{
-    button, checkbox, column, container, pick_list, radio, row, text_input,
+    button, center, checkbox, column, container, pick_list, radio, row, slider,
+    text_input,
 };
+use iced::{Element, Length};
 use iced_anim::{Animated, Animation, Event};
 use iced_dialog::dialog;
 use material_theme::button::{elevated, filled_tonal, outlined, text};
@@ -30,6 +31,7 @@ enum Message {
     Input(String),
     CheckBox(bool),
     Radio(Choice),
+    Slider(f32),
     SwitchTheme(Event<Theme>),
 }
 
@@ -40,6 +42,7 @@ pub struct State {
     content: String,
     is_checked: bool,
     selection: Option<Choice>,
+    value: f32,
 }
 
 #[derive(Debug, Clone, Copy, PartialEq, Eq)]
@@ -62,6 +65,7 @@ impl State {
             Message::Input(content) => self.content = content,
             Message::CheckBox(is_checked) => self.is_checked = is_checked,
             Message::Radio(choice) => self.selection = Some(choice),
+            Message::Slider(value) => self.value = value,
             Message::SwitchTheme(event) => {
                 self.theme.update(event);
             }
@@ -146,6 +150,10 @@ impl State {
                     radio("A", Choice::A, self.selection, Message::Radio,),
                     radio("B", Choice::B, self.selection, Message::Radio,),
                     radio("C", Choice::C, self.selection, Message::Radio,),
+                    center(iced::widget::text!("{:.1}", self.value))
+                        .width(Length::Fill)
+                        .height(Length::Shrink),
+                    slider(0.0..=100.0, self.value, Message::Slider).step(0.1)
                 ]
                 .spacing(10)
             ]