Try new approach to theming for Slider

style/src/lib.rs

@@ -10,7 +10,7 @@
 #![forbid(unsafe_code, rust_2018_idioms)]
 #![deny(
     unused_results,
-    missing_docs,
+    // missing_docs,
     unused_results,
     rustdoc::broken_intra_doc_links
 )]

style/src/slider.rs

@@ -1,6 +1,6 @@
 //! Change the apperance of a slider.
 use crate::core::border;
-use crate::core::Color;
+use crate::core::{Color, Pixels};
 
 /// The appearance of a slider.
 #[derive(Debug, Clone, Copy)]
@@ -11,6 +11,17 @@ pub struct Appearance {
     pub handle: Handle,
 }
 
+impl Appearance {
+    /// Changes the [`HandleShape`] of the [`Appearance`] to a circle
+    /// with the given radius.
+    pub fn with_circular_handle(mut self, radius: impl Into<Pixels>) -> Self {
+        self.handle.shape = HandleShape::Circle {
+            radius: radius.into().0,
+        };
+        self
+    }
+}
+
 /// The appearance of a slider rail
 #[derive(Debug, Clone, Copy)]
 pub struct Rail {
@@ -54,15 +65,11 @@ pub enum HandleShape {
 
 /// A set of rules that dictate the style of a slider.
 pub trait StyleSheet {
-    /// The supported style of the [`StyleSheet`].
+    fn default() -> fn(&Self, Status) -> Appearance;
-    type Style: Default;
+}
-
+
-    /// Produces the style of an active slider.
+pub enum Status {
-    fn active(&self, style: &Self::Style) -> Appearance;
+    Active,
-
+    Hovered,
-    /// Produces the style of an hovered slider.
+    Dragging,
-    fn hovered(&self, style: &Self::Style) -> Appearance;
-
-    /// Produces the style of a slider that is being dragged.
-    fn dragging(&self, style: &Self::Style) -> Appearance;
 }

style/src/theme.rs

@@ -608,23 +608,14 @@ impl<T: Fn(&Theme) -> container::Appearance> container::StyleSheet for T {
     }
 }
 
-/// The style of a slider.
+impl slider::StyleSheet for Theme {
-#[derive(Default)]
+    fn default() -> fn(&Self, slider::Status) -> slider::Appearance {
-pub enum Slider {
+        slider
-    /// The default style.
+    }
-    #[default]
-    Default,
-    /// A custom style.
-    Custom(Box<dyn slider::StyleSheet<Style = Theme>>),
 }
 
-impl slider::StyleSheet for Theme {
+pub fn slider(theme: &Theme, status: slider::Status) -> slider::Appearance {
-    type Style = Slider;
+    let palette = theme.extended_palette();
-
-    fn active(&self, style: &Self::Style) -> slider::Appearance {
-        match style {
-            Slider::Default => {
-                let palette = self.extended_palette();
 
     let handle = slider::Handle {
         shape: slider::HandleShape::Rectangle {
@@ -638,59 +629,20 @@ impl slider::StyleSheet for Theme {
 
     slider::Appearance {
         rail: slider::Rail {
-                        colors: (
+            colors: (palette.primary.base.color, palette.secondary.base.color),
-                            palette.primary.base.color,
-                            palette.secondary.base.color,
-                        ),
             width: 4.0,
             border_radius: 2.0.into(),
         },
         handle: slider::Handle {
-                        color: palette.background.base.color,
+            color: match status {
+                slider::Status::Active => palette.background.base.color,
+                slider::Status::Hovered => palette.primary.weak.color,
+                slider::Status::Dragging => palette.primary.base.color,
+            },
             border_color: palette.primary.base.color,
             ..handle
         },
     }
-            }
-            Slider::Custom(custom) => custom.active(self),
-        }
-    }
-
-    fn hovered(&self, style: &Self::Style) -> slider::Appearance {
-        match style {
-            Slider::Default => {
-                let active = self.active(style);
-                let palette = self.extended_palette();
-
-                slider::Appearance {
-                    handle: slider::Handle {
-                        color: palette.primary.weak.color,
-                        ..active.handle
-                    },
-                    ..active
-                }
-            }
-            Slider::Custom(custom) => custom.hovered(self),
-        }
-    }
-
-    fn dragging(&self, style: &Self::Style) -> slider::Appearance {
-        match style {
-            Slider::Default => {
-                let active = self.active(style);
-                let palette = self.extended_palette();
-
-                slider::Appearance {
-                    handle: slider::Handle {
-                        color: palette.primary.base.color,
-                        ..active.handle
-                    },
-                    ..active
-                }
-            }
-            Slider::Custom(custom) => custom.dragging(self),
-        }
-    }
 }
 
 /// The style of a menu.

widget/src/slider.rs

@@ -17,7 +17,7 @@ use crate::core::{
 use std::ops::RangeInclusive;
 
 pub use iced_style::slider::{
-    Appearance, Handle, HandleShape, Rail, StyleSheet,
+    Appearance, Handle, HandleShape, Rail, Status, StyleSheet,
 };
 
 /// An horizontal bar and a handle that selects a single value from a range of
@@ -58,7 +58,7 @@ where
     on_release: Option<Message>,
     width: Length,
     height: f32,
-    style: Theme::Style,
+    style: fn(&Theme, Status) -> Appearance,
 }
 
 impl<'a, T, Message, Theme> Slider<'a, T, Message, Theme>
@@ -104,7 +104,7 @@ where
             on_release: None,
             width: Length::Fill,
             height: Self::DEFAULT_HEIGHT,
-            style: Default::default(),
+            style: Theme::default(),
         }
     }
 
@@ -140,8 +140,8 @@ where
     }
 
     /// Sets the style of the [`Slider`].
-    pub fn style(mut self, style: impl Into<Theme::Style>) -> Self {
+    pub fn style(mut self, style: fn(&Theme, Status) -> Appearance) -> Self {
-        self.style = style.into();
+        self.style = style;
         self
     }
 
@@ -173,7 +173,7 @@ where
     }
 
     fn state(&self) -> tree::State {
-        tree::State::new(State::new())
+        tree::State::new(State::default())
     }
 
     fn size(&self) -> Size<Length> {
@@ -203,110 +203,27 @@ where
         shell: &mut Shell<'_, Message>,
         _viewport: &Rectangle,
     ) -> event::Status {
-        update(
+        let state = tree.state.downcast_mut::<State>();
-            event,
-            layout,
-            cursor,
-            shell,
-            tree.state.downcast_mut::<State>(),
-            &mut self.value,
-            self.default,
-            &self.range,
-            self.step,
-            self.shift_step,
-            self.on_change.as_ref(),
-            &self.on_release,
-        )
-    }
 
-    fn draw(
-        &self,
-        tree: &Tree,
-        renderer: &mut Renderer,
-        theme: &Theme,
-        _style: &renderer::Style,
-        layout: Layout<'_>,
-        cursor: mouse::Cursor,
-        _viewport: &Rectangle,
-    ) {
-        draw(
-            renderer,
-            layout,
-            cursor,
-            tree.state.downcast_ref::<State>(),
-            self.value,
-            &self.range,
-            theme,
-            &self.style,
-        );
-    }
-
-    fn mouse_interaction(
-        &self,
-        tree: &Tree,
-        layout: Layout<'_>,
-        cursor: mouse::Cursor,
-        _viewport: &Rectangle,
-        _renderer: &Renderer,
-    ) -> mouse::Interaction {
-        mouse_interaction(layout, cursor, tree.state.downcast_ref::<State>())
-    }
-}
-
-impl<'a, T, Message, Theme, Renderer> From<Slider<'a, T, Message, Theme>>
-    for Element<'a, Message, Theme, Renderer>
-where
-    T: Copy + Into<f64> + num_traits::FromPrimitive + 'a,
-    Message: Clone + 'a,
-    Theme: StyleSheet + 'a,
-    Renderer: crate::core::Renderer + 'a,
-{
-    fn from(
-        slider: Slider<'a, T, Message, Theme>,
-    ) -> Element<'a, Message, Theme, Renderer> {
-        Element::new(slider)
-    }
-}
-
-/// Processes an [`Event`] and updates the [`State`] of a [`Slider`]
-/// accordingly.
-pub fn update<Message, T>(
-    event: Event,
-    layout: Layout<'_>,
-    cursor: mouse::Cursor,
-    shell: &mut Shell<'_, Message>,
-    state: &mut State,
-    value: &mut T,
-    default: Option<T>,
-    range: &RangeInclusive<T>,
-    step: T,
-    shift_step: Option<T>,
-    on_change: &dyn Fn(T) -> Message,
-    on_release: &Option<Message>,
-) -> event::Status
-where
-    T: Copy + Into<f64> + num_traits::FromPrimitive,
-    Message: Clone,
-{
         let is_dragging = state.is_dragging;
-    let current_value = *value;
+        let current_value = self.value;
 
         let locate = |cursor_position: Point| -> Option<T> {
             let bounds = layout.bounds();
             let new_value = if cursor_position.x <= bounds.x {
-            Some(*range.start())
+                Some(*self.range.start())
             } else if cursor_position.x >= bounds.x + bounds.width {
-            Some(*range.end())
+                Some(*self.range.end())
             } else {
                 let step = if state.keyboard_modifiers.shift() {
-                shift_step.unwrap_or(step)
+                    self.shift_step.unwrap_or(self.step)
                 } else {
-                step
+                    self.step
                 }
                 .into();
 
-            let start = (*range.start()).into();
+                let start = (*self.range.start()).into();
-            let end = (*range.end()).into();
+                let end = (*self.range.end()).into();
 
                 let percent = f64::from(cursor_position.x - bounds.x)
                     / f64::from(bounds.width);
@@ -322,17 +239,17 @@ where
 
         let increment = |value: T| -> Option<T> {
             let step = if state.keyboard_modifiers.shift() {
-            shift_step.unwrap_or(step)
+                self.shift_step.unwrap_or(self.step)
             } else {
-            step
+                self.step
             }
             .into();
 
             let steps = (value.into() / step).round();
             let new_value = step * (steps + 1.0);
 
-        if new_value > (*range.end()).into() {
+            if new_value > (*self.range.end()).into() {
-            return Some(*range.end());
+                return Some(*self.range.end());
             }
 
             T::from_f64(new_value)
@@ -340,37 +257,38 @@ where
 
         let decrement = |value: T| -> Option<T> {
             let step = if state.keyboard_modifiers.shift() {
-            shift_step.unwrap_or(step)
+                self.shift_step.unwrap_or(self.step)
             } else {
-            step
+                self.step
             }
             .into();
 
             let steps = (value.into() / step).round();
             let new_value = step * (steps - 1.0);
 
-        if new_value < (*range.start()).into() {
+            if new_value < (*self.range.start()).into() {
-            return Some(*range.start());
+                return Some(*self.range.start());
             }
 
             T::from_f64(new_value)
         };
 
         let change = |new_value: T| {
-        if ((*value).into() - new_value.into()).abs() > f64::EPSILON {
+            if (self.value.into() - new_value.into()).abs() > f64::EPSILON {
-            shell.publish((on_change)(new_value));
+                shell.publish((self.on_change)(new_value));
 
-            *value = new_value;
+                self.value = new_value;
             }
         };
 
         match event {
             Event::Mouse(mouse::Event::ButtonPressed(mouse::Button::Left))
             | Event::Touch(touch::Event::FingerPressed { .. }) => {
-            if let Some(cursor_position) = cursor.position_over(layout.bounds())
+                if let Some(cursor_position) =
+                    cursor.position_over(layout.bounds())
                 {
                     if state.keyboard_modifiers.command() {
-                    let _ = default.map(change);
+                        let _ = self.default.map(change);
                         state.is_dragging = false;
                     } else {
                         let _ = locate(cursor_position).map(change);
@@ -384,7 +302,7 @@ where
             | Event::Touch(touch::Event::FingerLifted { .. })
             | Event::Touch(touch::Event::FingerLost { .. }) => {
                 if is_dragging {
-                if let Some(on_release) = on_release.clone() {
+                    if let Some(on_release) = self.on_release.clone() {
                         shell.publish(on_release);
                     }
                     state.is_dragging = false;
@@ -422,33 +340,32 @@ where
         }
 
         event::Status::Ignored
-}
+    }
 
-/// Draws a [`Slider`].
+    fn draw(
-pub fn draw<T, Theme, Renderer>(
+        &self,
+        tree: &Tree,
         renderer: &mut Renderer,
+        theme: &Theme,
+        _style: &renderer::Style,
         layout: Layout<'_>,
         cursor: mouse::Cursor,
-    state: &State,
+        _viewport: &Rectangle,
-    value: T,
+    ) {
-    range: &RangeInclusive<T>,
+        let state = tree.state.downcast_ref::<State>();
-    theme: &Theme,
-    style: &Theme::Style,
-) where
-    T: Into<f64> + Copy,
-    Theme: StyleSheet,
-    Renderer: crate::core::Renderer,
-{
         let bounds = layout.bounds();
         let is_mouse_over = cursor.is_over(bounds);
 
-    let style = if state.is_dragging {
+        let style = (self.style)(
-        theme.dragging(style)
+            theme,
+            if state.is_dragging {
+                Status::Dragging
             } else if is_mouse_over {
-        theme.hovered(style)
+                Status::Hovered
             } else {
-        theme.active(style)
+                Status::Active
-    };
+            },
+        );
 
         let (handle_width, handle_height, handle_border_radius) =
             match style.handle.shape {
@@ -461,9 +378,9 @@ pub fn draw<T, Theme, Renderer>(
                 } => (f32::from(width), bounds.height, border_radius),
             };
 
-    let value = value.into() as f32;
+        let value = self.value.into() as f32;
         let (range_start, range_end) = {
-        let (start, end) = range.clone().into_inner();
+            let (start, end) = self.range.clone().into_inner();
 
             (start.into() as f32, end.into() as f32)
         };
@@ -522,14 +439,17 @@ pub fn draw<T, Theme, Renderer>(
             },
             style.handle.color,
         );
-}
+    }
 
-/// Computes the current [`mouse::Interaction`] of a [`Slider`].
+    fn mouse_interaction(
-pub fn mouse_interaction(
+        &self,
+        tree: &Tree,
         layout: Layout<'_>,
         cursor: mouse::Cursor,
-    state: &State,
+        _viewport: &Rectangle,
-) -> mouse::Interaction {
+        _renderer: &Renderer,
+    ) -> mouse::Interaction {
+        let state = tree.state.downcast_ref::<State>();
         let bounds = layout.bounds();
         let is_mouse_over = cursor.is_over(bounds);
 
@@ -540,18 +460,26 @@ pub fn mouse_interaction(
         } else {
             mouse::Interaction::default()
         }
+    }
+}
+
+impl<'a, T, Message, Theme, Renderer> From<Slider<'a, T, Message, Theme>>
+    for Element<'a, Message, Theme, Renderer>
+where
+    T: Copy + Into<f64> + num_traits::FromPrimitive + 'a,
+    Message: Clone + 'a,
+    Theme: StyleSheet + 'a,
+    Renderer: crate::core::Renderer + 'a,
+{
+    fn from(
+        slider: Slider<'a, T, Message, Theme>,
+    ) -> Element<'a, Message, Theme, Renderer> {
+        Element::new(slider)
+    }
 }
 
-/// The local state of a [`Slider`].
 #[derive(Debug, Clone, Copy, PartialEq, Eq, Default)]
-pub struct State {
+struct State {
     is_dragging: bool,
     keyboard_modifiers: keyboard::Modifiers,
 }
-
-impl State {
-    /// Creates a new [`State`].
-    pub fn new() -> State {
-        State::default()
-    }
-}

widget/src/vertical_slider.rs

@@ -3,7 +3,9 @@
 //! A [`VerticalSlider`] has some local [`State`].
 use std::ops::RangeInclusive;
 
-pub use crate::style::slider::{Appearance, Handle, HandleShape, StyleSheet};
+pub use crate::style::slider::{
+    Appearance, Handle, HandleShape, Status, StyleSheet,
+};
 
 use crate::core;
 use crate::core::event::{self, Event};
@@ -55,7 +57,7 @@ where
     on_release: Option<Message>,
     width: f32,
     height: Length,
-    style: Theme::Style,
+    style: fn(&Theme, Status) -> Appearance,
 }
 
 impl<'a, T, Message, Theme> VerticalSlider<'a, T, Message, Theme>
@@ -101,7 +103,7 @@ where
             on_release: None,
             width: Self::DEFAULT_WIDTH,
             height: Length::Fill,
-            style: Default::default(),
+            style: Theme::default(),
         }
     }
 
@@ -137,7 +139,10 @@ where
     }
 
     /// Sets the style of the [`VerticalSlider`].
-    pub fn style(mut self, style: impl Into<Theme::Style>) -> Self {
+    pub fn style(
+        mut self,
+        style: impl Into<fn(&Theme, Status) -> Appearance>,
+    ) -> Self {
         self.style = style.into();
         self
     }
@@ -170,7 +175,7 @@ where
     }
 
     fn state(&self) -> tree::State {
-        tree::State::new(State::new())
+        tree::State::new(State::default())
     }
 
     fn size(&self) -> Size<Length> {
@@ -200,112 +205,27 @@ where
         shell: &mut Shell<'_, Message>,
         _viewport: &Rectangle,
     ) -> event::Status {
-        update(
+        let state = tree.state.downcast_mut::<State>();
-            event,
-            layout,
-            cursor,
-            shell,
-            tree.state.downcast_mut::<State>(),
-            &mut self.value,
-            self.default,
-            &self.range,
-            self.step,
-            self.shift_step,
-            self.on_change.as_ref(),
-            &self.on_release,
-        )
-    }
-
-    fn draw(
-        &self,
-        tree: &Tree,
-        renderer: &mut Renderer,
-        theme: &Theme,
-        _style: &renderer::Style,
-        layout: Layout<'_>,
-        cursor: mouse::Cursor,
-        _viewport: &Rectangle,
-    ) {
-        draw(
-            renderer,
-            layout,
-            cursor,
-            tree.state.downcast_ref::<State>(),
-            self.value,
-            &self.range,
-            theme,
-            &self.style,
-        );
-    }
-
-    fn mouse_interaction(
-        &self,
-        tree: &Tree,
-        layout: Layout<'_>,
-        cursor: mouse::Cursor,
-        _viewport: &Rectangle,
-        _renderer: &Renderer,
-    ) -> mouse::Interaction {
-        mouse_interaction(layout, cursor, tree.state.downcast_ref::<State>())
-    }
-}
-
-impl<'a, T, Message, Theme, Renderer>
-    From<VerticalSlider<'a, T, Message, Theme>>
-    for Element<'a, Message, Theme, Renderer>
-where
-    T: Copy + Into<f64> + num_traits::FromPrimitive + 'a,
-    Message: Clone + 'a,
-    Theme: StyleSheet + 'a,
-    Renderer: core::Renderer + 'a,
-{
-    fn from(
-        slider: VerticalSlider<'a, T, Message, Theme>,
-    ) -> Element<'a, Message, Theme, Renderer> {
-        Element::new(slider)
-    }
-}
-
-/// Processes an [`Event`] and updates the [`State`] of a [`VerticalSlider`]
-/// accordingly.
-pub fn update<Message, T>(
-    event: Event,
-    layout: Layout<'_>,
-    cursor: mouse::Cursor,
-    shell: &mut Shell<'_, Message>,
-    state: &mut State,
-    value: &mut T,
-    default: Option<T>,
-    range: &RangeInclusive<T>,
-    step: T,
-    shift_step: Option<T>,
-    on_change: &dyn Fn(T) -> Message,
-    on_release: &Option<Message>,
-) -> event::Status
-where
-    T: Copy + Into<f64> + num_traits::FromPrimitive,
-    Message: Clone,
-{
         let is_dragging = state.is_dragging;
-    let current_value = *value;
+        let current_value = self.value;
 
         let locate = |cursor_position: Point| -> Option<T> {
             let bounds = layout.bounds();
 
             let new_value = if cursor_position.y >= bounds.y + bounds.height {
-            Some(*range.start())
+                Some(*self.range.start())
             } else if cursor_position.y <= bounds.y {
-            Some(*range.end())
+                Some(*self.range.end())
             } else {
                 let step = if state.keyboard_modifiers.shift() {
-                shift_step.unwrap_or(step)
+                    self.shift_step.unwrap_or(self.step)
                 } else {
-                step
+                    self.step
                 }
                 .into();
 
-            let start = (*range.start()).into();
+                let start = (*self.range.start()).into();
-            let end = (*range.end()).into();
+                let end = (*self.range.end()).into();
 
                 let percent = 1.0
                     - f64::from(cursor_position.y - bounds.y)
@@ -322,17 +242,17 @@ where
 
         let increment = |value: T| -> Option<T> {
             let step = if state.keyboard_modifiers.shift() {
-            shift_step.unwrap_or(step)
+                self.shift_step.unwrap_or(self.step)
             } else {
-            step
+                self.step
             }
             .into();
 
             let steps = (value.into() / step).round();
             let new_value = step * (steps + 1.0);
 
-        if new_value > (*range.end()).into() {
+            if new_value > (*self.range.end()).into() {
-            return Some(*range.end());
+                return Some(*self.range.end());
             }
 
             T::from_f64(new_value)
@@ -340,39 +260,40 @@ where
 
         let decrement = |value: T| -> Option<T> {
             let step = if state.keyboard_modifiers.shift() {
-            shift_step.unwrap_or(step)
+                self.shift_step.unwrap_or(self.step)
             } else {
-            step
+                self.step
             }
             .into();
 
             let steps = (value.into() / step).round();
             let new_value = step * (steps - 1.0);
 
-        if new_value < (*range.start()).into() {
+            if new_value < (*self.range.start()).into() {
-            return Some(*range.start());
+                return Some(*self.range.start());
             }
 
             T::from_f64(new_value)
         };
 
         let change = |new_value: T| {
-        if ((*value).into() - new_value.into()).abs() > f64::EPSILON {
+            if (self.value.into() - new_value.into()).abs() > f64::EPSILON {
-            shell.publish((on_change)(new_value));
+                shell.publish((self.on_change)(new_value));
 
-            *value = new_value;
+                self.value = new_value;
             }
         };
 
         match event {
             Event::Mouse(mouse::Event::ButtonPressed(mouse::Button::Left))
             | Event::Touch(touch::Event::FingerPressed { .. }) => {
-            if let Some(cursor_position) = cursor.position_over(layout.bounds())
+                if let Some(cursor_position) =
+                    cursor.position_over(layout.bounds())
                 {
                     if state.keyboard_modifiers.control()
                         || state.keyboard_modifiers.command()
                     {
-                    let _ = default.map(change);
+                        let _ = self.default.map(change);
                         state.is_dragging = false;
                     } else {
                         let _ = locate(cursor_position).map(change);
@@ -386,7 +307,7 @@ where
             | Event::Touch(touch::Event::FingerLifted { .. })
             | Event::Touch(touch::Event::FingerLost { .. }) => {
                 if is_dragging {
-                if let Some(on_release) = on_release.clone() {
+                    if let Some(on_release) = self.on_release.clone() {
                         shell.publish(on_release);
                     }
                     state.is_dragging = false;
@@ -424,33 +345,32 @@ where
         }
 
         event::Status::Ignored
-}
+    }
 
-/// Draws a [`VerticalSlider`].
+    fn draw(
-pub fn draw<T, Theme, Renderer>(
+        &self,
+        tree: &Tree,
         renderer: &mut Renderer,
+        theme: &Theme,
+        _style: &renderer::Style,
         layout: Layout<'_>,
         cursor: mouse::Cursor,
-    state: &State,
+        _viewport: &Rectangle,
-    value: T,
+    ) {
-    range: &RangeInclusive<T>,
+        let state = tree.state.downcast_ref::<State>();
-    style_sheet: &Theme,
-    style: &Theme::Style,
-) where
-    T: Into<f64> + Copy,
-    Theme: StyleSheet,
-    Renderer: core::Renderer,
-{
         let bounds = layout.bounds();
         let is_mouse_over = cursor.is_over(bounds);
 
-    let style = if state.is_dragging {
+        let style = (self.style)(
-        style_sheet.dragging(style)
+            theme,
+            if state.is_dragging {
+                Status::Dragging
             } else if is_mouse_over {
-        style_sheet.hovered(style)
+                Status::Hovered
             } else {
-        style_sheet.active(style)
+                Status::Active
-    };
+            },
+        );
 
         let (handle_width, handle_height, handle_border_radius) =
             match style.handle.shape {
@@ -463,9 +383,9 @@ pub fn draw<T, Theme, Renderer>(
                 } => (f32::from(width), bounds.width, border_radius),
             };
 
-    let value = value.into() as f32;
+        let value = self.value.into() as f32;
         let (range_start, range_end) = {
-        let (start, end) = range.clone().into_inner();
+            let (start, end) = self.range.clone().into_inner();
 
             (start.into() as f32, end.into() as f32)
         };
@@ -524,14 +444,17 @@ pub fn draw<T, Theme, Renderer>(
             },
             style.handle.color,
         );
-}
+    }
 
-/// Computes the current [`mouse::Interaction`] of a [`VerticalSlider`].
+    fn mouse_interaction(
-pub fn mouse_interaction(
+        &self,
+        tree: &Tree,
         layout: Layout<'_>,
         cursor: mouse::Cursor,
-    state: &State,
+        _viewport: &Rectangle,
-) -> mouse::Interaction {
+        _renderer: &Renderer,
+    ) -> mouse::Interaction {
+        let state = tree.state.downcast_ref::<State>();
         let bounds = layout.bounds();
         let is_mouse_over = cursor.is_over(bounds);
 
@@ -542,18 +465,27 @@ pub fn mouse_interaction(
         } else {
             mouse::Interaction::default()
         }
+    }
+}
+
+impl<'a, T, Message, Theme, Renderer>
+    From<VerticalSlider<'a, T, Message, Theme>>
+    for Element<'a, Message, Theme, Renderer>
+where
+    T: Copy + Into<f64> + num_traits::FromPrimitive + 'a,
+    Message: Clone + 'a,
+    Theme: StyleSheet + 'a,
+    Renderer: core::Renderer + 'a,
+{
+    fn from(
+        slider: VerticalSlider<'a, T, Message, Theme>,
+    ) -> Element<'a, Message, Theme, Renderer> {
+        Element::new(slider)
+    }
 }
 
-/// The local state of a [`VerticalSlider`].
 #[derive(Debug, Clone, Copy, PartialEq, Eq, Default)]
-pub struct State {
+struct State {
     is_dragging: bool,
     keyboard_modifiers: keyboard::Modifiers,
 }
-
-impl State {
-    /// Creates a new [`State`].
-    pub fn new() -> State {
-        State::default()
-    }
-}