Implement styling for `Slider`

3 files changed, 53 insertions, 21 deletions

diff --git a/wgpu/src/renderer/widget/slider.rs b/wgpu/src/renderer/widget/slider.rs
index 386decb5..c8ebd0da 100644
--- a/wgpu/src/renderer/widget/slider.rs
+++ b/wgpu/src/renderer/widget/slider.rs
@@ -1,10 +1,14 @@
-use crate::{Primitive, Renderer};
+use crate::{
+    slider::{HandleShape, StyleSheet},
+    Primitive, Renderer,
+};
 use iced_native::{slider, Background, Color, MouseCursor, Point, Rectangle};
 
-const HANDLE_WIDTH: f32 = 8.0;
 const HANDLE_HEIGHT: f32 = 22.0;
 
 impl slider::Renderer for Renderer {
+    type Style = Box<dyn StyleSheet>;
+
     fn height(&self) -> u32 {
         30
     }
@@ -16,9 +20,18 @@ impl slider::Renderer for Renderer {
         range: std::ops::RangeInclusive<f32>,
         value: f32,
         is_dragging: bool,
+        style_sheet: &Self::Style,
     ) -> Self::Output {
         let is_mouse_over = bounds.contains(cursor_position);
 
+        let style = if is_dragging {
+            style_sheet.dragging()
+        } else if is_mouse_over {
+            style_sheet.hovered()
+        } else {
+            style_sheet.active()
+        };
+
         let rail_y = bounds.y + (bounds.height / 2.0).round();
 
         let (rail_top, rail_bottom) = (
@@ -29,7 +42,7 @@ impl slider::Renderer for Renderer {
                     width: bounds.width,
                     height: 2.0,
                 },
-                background: Background::Color([0.6, 0.6, 0.6, 0.5].into()),
+                background: Background::Color(style.rail_colors.0),
                 border_radius: 0,
                 border_width: 0,
                 border_color: Color::TRANSPARENT,
@@ -41,7 +54,7 @@ impl slider::Renderer for Renderer {
                     width: bounds.width,
                     height: 2.0,
                 },
-                background: Background::Color(Color::WHITE),
+                background: Background::Color(style.rail_colors.1),
                 border_radius: 0,
                 border_width: 0,
                 border_color: Color::TRANSPARENT,
@@ -50,29 +63,31 @@ impl slider::Renderer for Renderer {
 
         let (range_start, range_end) = range.into_inner();
 
-        let handle_offset = (bounds.width - HANDLE_WIDTH)
+        let (handle_width, handle_height, handle_border_radius) =
+            match style.handle.shape {
+                HandleShape::Circle { radius } => {
+                    (f32::from(radius * 2), f32::from(radius * 2), radius)
+                }
+                HandleShape::Rectangle {
+                    width,
+                    border_radius,
+                } => (f32::from(width), HANDLE_HEIGHT, border_radius),
+            };
+
+        let handle_offset = (bounds.width - handle_width)
             * ((value - range_start) / (range_end - range_start).max(1.0));
 
         let handle = Primitive::Quad {
             bounds: Rectangle {
                 x: bounds.x + handle_offset.round(),
-                y: rail_y - HANDLE_HEIGHT / 2.0,
-                width: HANDLE_WIDTH,
-                height: HANDLE_HEIGHT,
+                y: rail_y - handle_height / 2.0,
+                width: handle_width,
+                height: handle_height,
             },
-            background: Background::Color(
-                if is_dragging {
-                    [0.85, 0.85, 0.85]
-                } else if is_mouse_over {
-                    [0.90, 0.90, 0.90]
-                } else {
-                    [0.95, 0.95, 0.95]
-                }
-                .into(),
-            ),
-            border_radius: 4,
-            border_width: 1,
-            border_color: Color::from_rgb(0.6, 0.6, 0.6),
+            background: Background::Color(style.handle.color),
+            border_radius: handle_border_radius,
+            border_width: style.handle.border_width,
+            border_color: style.handle.border_color,
         };
 
         (
diff --git a/wgpu/src/widget.rs b/wgpu/src/widget.rs
index fb90b2b5..4b8d339e 100644
--- a/wgpu/src/widget.rs
+++ b/wgpu/src/widget.rs
@@ -1,4 +1,5 @@
 pub mod button;
 pub mod container;
 pub mod scrollable;
+pub mod slider;
 pub mod text_input;
diff --git a/wgpu/src/widget/slider.rs b/wgpu/src/widget/slider.rs
new file mode 100644
index 00000000..4e47978f
--- /dev/null
+++ b/wgpu/src/widget/slider.rs
@@ -0,0 +1,16 @@
+//! Display an interactive selector of a single value from a range of values.
+//!
+//! A [`Slider`] has some local [`State`].
+//!
+//! [`Slider`]: struct.Slider.html
+//! [`State`]: struct.State.html
+use crate::Renderer;
+
+pub use iced_native::slider::State;
+pub use iced_style::slider::{Handle, HandleShape, Style, StyleSheet};
+
+/// An horizontal bar and a handle that selects a single value from a range of
+/// values.
+///
+/// This is an alias of an `iced_native` slider with an `iced_wgpu::Renderer`.
+pub type Slider<'a, Message> = iced_native::Slider<'a, Message, Renderer>;