Introduce left and right colors for slider rails

4 files changed, 130 insertions, 80 deletions

diff --git a/native/src/widget/slider.rs b/native/src/widget/slider.rs
index d3715b1c..b3f3306c 100644
--- a/native/src/widget/slider.rs
+++ b/native/src/widget/slider.rs
@@ -8,13 +8,15 @@ use crate::renderer;
 use crate::touch;
 use crate::widget::tree::{self, Tree};
 use crate::{
-    Background, Clipboard, Color, Element, Layout, Length, Pixels, Point,
-    Rectangle, Shell, Size, Widget,
+    Clipboard, Element, Layout, Length, Pixels, Point, Rectangle, Shell, Size,
+    Widget,
 };
 
 use std::ops::RangeInclusive;
 
-pub use iced_style::slider::{Appearance, Handle, HandleShape, StyleSheet};
+pub use iced_style::slider::{
+    Appearance, Handle, HandleShape, Rail, StyleSheet,
+};
 
 /// An horizontal bar and a handle that selects a single value from a range of
 /// values.
@@ -368,37 +370,7 @@ pub fn draw<T, R>(
         style_sheet.active(style)
     };
 
-    let rail_y = bounds.y + (bounds.height / 2.0).round();
-
-    renderer.fill_quad(
-        renderer::Quad {
-            bounds: Rectangle {
-                x: bounds.x,
-                y: rail_y - 1.0,
-                width: bounds.width,
-                height: 2.0,
-            },
-            border_radius: 0.0.into(),
-            border_width: 0.0,
-            border_color: Color::TRANSPARENT,
-        },
-        style.rail_colors.0,
-    );
-
-    renderer.fill_quad(
-        renderer::Quad {
-            bounds: Rectangle {
-                x: bounds.x,
-                y: rail_y + 1.0,
-                width: bounds.width,
-                height: 2.0,
-            },
-            border_radius: 0.0.into(),
-            border_width: 0.0,
-            border_color: Color::TRANSPARENT,
-        },
-        Background::Color(style.rail_colors.1),
-    );
+    let value = value.into() as f32;
 
     let (handle_width, handle_height, handle_border_radius) = match style
         .handle
@@ -411,25 +383,69 @@ pub fn draw<T, R>(
         } => (f32::from(width), bounds.height, border_radius),
     };
 
-    let value = value.into() as f32;
     let (range_start, range_end) = {
         let (start, end) = range.clone().into_inner();
 
         (start.into() as f32, end.into() as f32)
     };
 
-    let handle_offset = if range_start >= range_end {
+    let offset = if range_start >= range_end {
         0.0
     } else {
         (bounds.width - handle_width) * (value - range_start)
             / (range_end - range_start)
     };
 
+    let line_y = bounds.y + bounds.height / 2.0 - style.rail.size / 2.0;
+    let line_offset = offset + handle_width / 2.0;
+
+    renderer.fill_quad(
+        renderer::Quad {
+            bounds: Rectangle {
+                x: bounds.x,
+                y: line_y,
+                width: line_offset,
+                height: style.rail.size,
+            },
+            border_radius: [
+                style.rail.border_radius,
+                0.0,
+                0.0,
+                style.rail.border_radius,
+            ]
+            .into(),
+            border_width: style.rail.border_width,
+            border_color: style.rail.border_color,
+        },
+        style.rail.colors.0,
+    );
+
+    renderer.fill_quad(
+        renderer::Quad {
+            bounds: Rectangle {
+                x: bounds.x + line_offset.round(),
+                y: line_y,
+                width: bounds.width - line_offset,
+                height: style.rail.size,
+            },
+            border_radius: [
+                0.0,
+                style.rail.border_radius,
+                style.rail.border_radius,
+                0.0,
+            ]
+            .into(),
+            border_width: style.rail.border_width,
+            border_color: style.rail.border_color,
+        },
+        style.rail.colors.1,
+    );
+
     renderer.fill_quad(
         renderer::Quad {
             bounds: Rectangle {
-                x: bounds.x + handle_offset.round(),
-                y: rail_y - handle_height / 2.0,
+                x: bounds.x + offset.round(),
+                y: bounds.y + bounds.height / 2.0 - handle_height / 2.0,
                 width: handle_width,
                 height: handle_height,
             },
diff --git a/native/src/widget/vertical_slider.rs b/native/src/widget/vertical_slider.rs
index f1687e38..3a8c30b6 100644
--- a/native/src/widget/vertical_slider.rs
+++ b/native/src/widget/vertical_slider.rs
@@ -8,8 +8,8 @@ pub use iced_style::slider::{Appearance, Handle, HandleShape, StyleSheet};
 use crate::event::{self, Event};
 use crate::widget::tree::{self, Tree};
 use crate::{
-    layout, mouse, renderer, touch, Background, Clipboard, Color, Element,
-    Layout, Length, Pixels, Point, Rectangle, Shell, Size, Widget,
+    layout, mouse, renderer, touch, Clipboard, Element, Layout, Length, Pixels,
+    Point, Rectangle, Shell, Size, Widget,
 };
 
 /// An vertical bar and a handle that selects a single value from a range of
@@ -363,38 +363,6 @@ pub fn draw<T, R>(
         style_sheet.active(style)
     };
 
-    let rail_x = bounds.x + (bounds.width / 2.0).round();
-
-    renderer.fill_quad(
-        renderer::Quad {
-            bounds: Rectangle {
-                x: rail_x - 1.0,
-                y: bounds.y,
-                width: 2.0,
-                height: bounds.height,
-            },
-            border_radius: 0.0.into(),
-            border_width: 0.0,
-            border_color: Color::TRANSPARENT,
-        },
-        style.rail_colors.0,
-    );
-
-    renderer.fill_quad(
-        renderer::Quad {
-            bounds: Rectangle {
-                x: rail_x + 1.0,
-                y: bounds.y,
-                width: 2.0,
-                height: bounds.height,
-            },
-            border_radius: 0.0.into(),
-            border_width: 0.0,
-            border_color: Color::TRANSPARENT,
-        },
-        Background::Color(style.rail_colors.1),
-    );
-
     let (handle_width, handle_height, handle_border_radius) = match style
         .handle
         .shape
@@ -413,18 +381,63 @@ pub fn draw<T, R>(
         (start.into() as f32, end.into() as f32)
     };
 
-    let handle_offset = if range_start >= range_end {
+    let offset = if range_start >= range_end {
         0.0
     } else {
         (bounds.height - handle_width) * (value - range_end)
             / (range_start - range_end)
     };
 
+    let line_x = bounds.x + bounds.width / 2.0 - style.rail.size / 2.0;
+    let line_offset = offset + handle_width / 2.0;
+
+    renderer.fill_quad(
+        renderer::Quad {
+            bounds: Rectangle {
+                x: line_x,
+                y: bounds.y,
+                width: style.rail.size,
+                height: line_offset,
+            },
+            border_radius: [
+                style.rail.border_radius,
+                style.rail.border_radius,
+                0.0,
+                0.0,
+            ]
+            .into(),
+            border_width: style.rail.border_width,
+            border_color: style.rail.border_color,
+        },
+        style.rail.colors.1,
+    );
+
+    renderer.fill_quad(
+        renderer::Quad {
+            bounds: Rectangle {
+                x: line_x,
+                y: bounds.y + line_offset.round(),
+                width: style.rail.size,
+                height: bounds.height - line_offset,
+            },
+            border_radius: [
+                0.0,
+                0.0,
+                style.rail.border_radius,
+                style.rail.border_radius,
+            ]
+            .into(),
+            border_width: style.rail.border_width,
+            border_color: style.rail.border_color,
+        },
+        style.rail.colors.0,
+    );
+
     renderer.fill_quad(
         renderer::Quad {
             bounds: Rectangle {
-                x: rail_x - (handle_height / 2.0),
-                y: bounds.y + handle_offset.round(),
+                x: bounds.x + bounds.width / 2.0 - handle_height / 2.0,
+                y: bounds.y + offset.round(),
                 width: handle_height,
                 height: handle_width,
             },
diff --git a/style/src/slider.rs b/style/src/slider.rs
index 4b52fad3..c143915e 100644
--- a/style/src/slider.rs
+++ b/style/src/slider.rs
@@ -5,11 +5,26 @@ use iced_core::Color;
 #[derive(Debug, Clone, Copy)]
 pub struct Appearance {
     /// The colors of the rail of the slider.
-    pub rail_colors: (Color, Color),
+    pub rail: Rail,
     /// The appearance of the [`Handle`] of the slider.
     pub handle: Handle,
 }
 
+/// The appearance of a slider rail
+#[derive(Debug, Clone, Copy)]
+pub struct Rail {
+    /// The colors of the rail of the slider.
+    pub colors: (Color, Color),
+    /// The height of a slider rail and the width of a vertical slider.
+    pub size: f32,
+    /// The border radius of the slider.
+    pub border_radius: f32,
+    /// The border width of the slider.
+    pub border_width: f32,
+    /// The border [`Color`] of the slider.
+    pub border_color: Color,
+}
+
 /// The appearance of the handle of a slider.
 #[derive(Debug, Clone, Copy)]
 pub struct Handle {
diff --git a/style/src/theme.rs b/style/src/theme.rs
index 6bd82a96..417680a1 100644
--- a/style/src/theme.rs
+++ b/style/src/theme.rs
@@ -416,10 +416,16 @@ impl slider::StyleSheet for Theme {
                 };
 
                 slider::Appearance {
-                    rail_colors: (
-                        palette.primary.base.color,
-                        Color::TRANSPARENT,
-                    ),
+                    rail: slider::Rail {
+                        colors: (
+                            palette.primary.base.color,
+                            palette.primary.base.color,
+                        ),
+                        size: 2.0,
+                        border_radius: 0.0,
+                        border_width: 0.0,
+                        border_color: Color::TRANSPARENT,
+                    },
                     handle: slider::Handle {
                         color: palette.background.base.color,
                         border_color: palette.primary.base.color,