feat: gradient background for the slider rail

examples/slider/Cargo.toml

@@ -6,4 +6,4 @@ edition = "2021"
 publish = false
 
 [dependencies]
-iced = { path = "../.." }
+iced = { path = "../..", features = ["winit"] }

examples/tour/Cargo.toml

@@ -6,5 +6,5 @@ edition = "2021"
 publish = false
 
 [dependencies]
-iced = { path = "../..", features = ["image", "debug"] }
+iced = { path = "../..", features = ["image", "debug", "winit"] }
 env_logger = "0.10.0"

style/src/slider.rs

@@ -1,5 +1,5 @@
 //! Change the apperance of a slider.
-use iced_core::{BorderRadius, Color};
+use iced_core::{gradient::Linear, BorderRadius, Color};
 
 /// The appearance of a slider.
 #[derive(Debug, Clone, Copy)]
@@ -14,13 +14,28 @@ pub struct Appearance {
 #[derive(Debug, Clone, Copy)]
 pub struct Rail {
     /// The colors of the rail of the slider.
-    pub colors: (Color, Color),
+    pub colors: RailBackground,
     /// The width of the stroke of a slider rail.
     pub width: f32,
     /// The border radius of the corners of the rail.
     pub border_radius: BorderRadius,
 }
 
+/// The background color of the rail
+#[derive(Debug, Clone, Copy)]
+pub enum RailBackground {
+    /// Start and end colors of the rail
+    Pair(Color, Color),
+    /// Linear gradient for the background of the rail
+    /// includes an option for auto-selecting the angle
+    Gradient {
+        /// the linear gradient of the slider
+        gradient: Linear,
+        /// Let the widget determin the angle of the gradient
+        auto_angle: bool,
+    },
+}
+
 /// The appearance of the handle of a slider.
 #[derive(Debug, Clone, Copy)]
 pub struct Handle {

style/src/theme.rs

@@ -17,10 +17,17 @@ use crate::radio;
 use crate::rule;
 use crate::scrollable;
 use crate::slider;
+use crate::slider::RailBackground;
 use crate::svg;
 use crate::text_input;
 use crate::toggler;
 
+use ::palette::FromColor;
+use ::palette::RgbHue;
+use iced_core::gradient::ColorStop;
+use iced_core::gradient::Linear;
+use iced_core::Degrees;
+use iced_core::Radians;
 use iced_core::{Background, Color, Vector};
 
 use std::rc::Rc;
@@ -433,7 +440,7 @@ impl slider::StyleSheet for Theme {
 
                 slider::Appearance {
                     rail: slider::Rail {
-                        colors: (
+                        colors: RailBackground::Pair(
                             palette.primary.base.color,
                             palette.secondary.base.color,
                         ),

widget/src/rule.rs

@@ -47,6 +47,24 @@ where
         }
     }
 
+    /// Set the width of the rule
+    /// Will not be applied if it is vertical
+    pub fn width(mut self, width: impl Into<Length>) -> Self {
+        if self.is_horizontal {
+            self.width = width.into();
+        }
+        self
+    }
+
+    /// Set the height of the rule
+    /// Will not be applied if it is horizontal
+    pub fn height(mut self, height: impl Into<Length>) -> Self {
+        if !self.is_horizontal {
+            self.height = height.into();
+        }
+        self
+    }
+
     /// Sets the style of the [`Rule`].
     pub fn style(
         mut self,

widget/src/slider.rs

@@ -16,7 +16,7 @@ use crate::core::{
 use std::borrow::Cow;
 use std::ops::RangeInclusive;
 
-use iced_renderer::core::BorderRadius;
+use iced_renderer::core::{BorderRadius, Degrees, Radians};
 pub use iced_style::slider::{
     Appearance, Handle, HandleShape, Rail, StyleSheet,
 };
@@ -545,37 +545,63 @@ pub fn draw<T, R>(
 
     let rail_y = bounds.y + bounds.height / 2.0;
 
-    // rail
-    renderer.fill_quad(
-        renderer::Quad {
-            bounds: Rectangle {
-                x: bounds.x,
-                y: rail_y - style.rail.width / 2.0,
-                width: offset + handle_width / 2.0,
-                height: style.rail.width,
+    match style.rail.colors {
+        iced_style::slider::RailBackground::Pair(l, r) => {
+            // rail
+            renderer.fill_quad(
+                renderer::Quad {
+                    bounds: Rectangle {
+                        x: bounds.x,
+                        y: rail_y - style.rail.width / 2.0,
+                        width: offset + handle_width / 2.0,
+                        height: style.rail.width,
+                    },
+                    border_radius: style.rail.border_radius,
+                    border_width: 0.0,
+                    border_color: Color::TRANSPARENT,
+                },
+                l,
+            );
+
+            // right rail
+            renderer.fill_quad(
+                renderer::Quad {
+                    bounds: Rectangle {
+                        x: bounds.x + offset + handle_width / 2.0,
+                        y: rail_y - style.rail.width / 2.0,
+                        width: bounds.width - offset - handle_width / 2.0,
+                        height: style.rail.width,
+                    },
+                    border_radius: style.rail.border_radius,
+                    border_width: 0.0,
+                    border_color: Color::TRANSPARENT,
+                },
+                r,
+            );
+        }
+        iced_style::slider::RailBackground::Gradient {
+            mut gradient,
+            auto_angle,
+        } => renderer.fill_quad(
+            renderer::Quad {
+                bounds: Rectangle {
+                    x: bounds.x,
+                    y: rail_y - style.rail.width / 2.0,
+                    width: bounds.width,
+                    height: style.rail.width,
+                },
+                border_radius: style.rail.border_radius,
+                border_width: 0.0,
+                border_color: Color::TRANSPARENT,
             },
-            border_radius: style.rail.border_radius,
-            border_width: 0.0,
-            border_color: Color::TRANSPARENT,
-        },
-        style.rail.colors.0,
-    );
-
-    // right rail
-    renderer.fill_quad(
-        renderer::Quad {
-            bounds: Rectangle {
-                x: bounds.x + offset + handle_width / 2.0,
-                y: rail_y - style.rail.width / 2.0,
-                width: bounds.width - offset - handle_width / 2.0,
-                height: style.rail.width,
+            if auto_angle {
+                gradient.angle = Radians::from(Degrees(180.0));
+                gradient
+            } else {
+                gradient
             },
-            border_radius: style.rail.border_radius,
-            border_width: 0.0,
-            border_color: Color::TRANSPARENT,
-        },
-        style.rail.colors.1,
-    );
+        ),
+    }
 
     // handle
     renderer.fill_quad(

widget/src/vertical_slider.rs

@@ -3,6 +3,8 @@
 //! A [`VerticalSlider`] has some local [`State`].
 use std::ops::RangeInclusive;
 
+use iced_renderer::core::{Degrees, Radians};
+
 pub use crate::style::slider::{Appearance, Handle, HandleShape, StyleSheet};
 
 use crate::core;
@@ -392,35 +394,63 @@ pub fn draw<T, R>(
 
     let rail_x = bounds.x + bounds.width / 2.0;
 
-    renderer.fill_quad(
-        renderer::Quad {
-            bounds: Rectangle {
-                x: rail_x - style.rail.width / 2.0,
-                y: bounds.y,
-                width: style.rail.width,
-                height: offset + handle_width / 2.0,
-            },
-            border_radius: style.rail.border_radius,
-            border_width: 0.0,
-            border_color: Color::TRANSPARENT,
-        },
-        style.rail.colors.1,
-    );
-
-    renderer.fill_quad(
-        renderer::Quad {
-            bounds: Rectangle {
-                x: rail_x - style.rail.width / 2.0,
-                y: bounds.y + offset + handle_width / 2.0,
-                width: style.rail.width,
-                height: bounds.height - offset - handle_width / 2.0,
-            },
-            border_radius: style.rail.border_radius,
-            border_width: 0.0,
-            border_color: Color::TRANSPARENT,
-        },
-        style.rail.colors.0,
-    );
+    match style.rail.colors {
+        iced_style::slider::RailBackground::Pair(start, end) => {
+            renderer.fill_quad(
+                renderer::Quad {
+                    bounds: Rectangle {
+                        x: rail_x - style.rail.width / 2.0,
+                        y: bounds.y,
+                        width: style.rail.width,
+                        height: offset + handle_width / 2.0,
+                    },
+                    border_radius: style.rail.border_radius,
+                    border_width: 0.0,
+                    border_color: Color::TRANSPARENT,
+                },
+                end,
+            );
+
+            renderer.fill_quad(
+                renderer::Quad {
+                    bounds: Rectangle {
+                        x: rail_x - style.rail.width / 2.0,
+                        y: bounds.y + offset + handle_width / 2.0,
+                        width: style.rail.width,
+                        height: bounds.height - offset - handle_width / 2.0,
+                    },
+                    border_radius: style.rail.border_radius,
+                    border_width: 0.0,
+                    border_color: Color::TRANSPARENT,
+                },
+                start,
+            );
+        }
+        iced_style::slider::RailBackground::Gradient {
+            mut gradient,
+            auto_angle,
+        } => {
+            renderer.fill_quad(
+                renderer::Quad {
+                    bounds: Rectangle {
+                        x: rail_x - style.rail.width / 2.0,
+                        y: bounds.y,
+                        width: style.rail.width,
+                        height: bounds.height - handle_width / 2.0,
+                    },
+                    border_radius: style.rail.border_radius,
+                    border_width: 0.0,
+                    border_color: Color::TRANSPARENT,
+                },
+                if auto_angle {
+                    gradient.angle = Radians::from(Degrees(90.0));
+                    gradient
+                } else {
+                    gradient
+                },
+            );
+        }
+    }
 
     renderer.fill_quad(
         renderer::Quad {