From 9b11d9ab7222584671406326e960eeb5f5dbeae2 Mon Sep 17 00:00:00 2001
From: wiiznokes <78230769+wiiznokes@users.noreply.github.com>
Date: Thu, 26 Sep 2024 22:45:18 +0200
Subject: [PATCH 1/2] fix the slider

---
 widget/src/slider.rs | 21 ++++++++++++++-------
 1 file changed, 14 insertions(+), 7 deletions(-)

diff --git a/widget/src/slider.rs b/widget/src/slider.rs
index 9477958d3d..bb843ece8d 100644
--- a/widget/src/slider.rs
+++ b/widget/src/slider.rs
@@ -451,43 +451,50 @@ where
             (start.into() as f32, end.into() as f32)
         };
 
+        // Given this layout simplification:
+        // bound1   start    value     end    bound2
+        // offset will be the distance: value - start
         let offset = if range_start >= range_end {
             0.0
         } else {
+            // yes, handle_width need to be there
             (bounds.width - handle_width) * (value - range_start)
                 / (range_end - range_start)
         };
 
         let rail_y = bounds.y + bounds.height / 2.0;
 
+        // background bar
         renderer.fill_quad(
             renderer::Quad {
                 bounds: Rectangle {
-                    x: bounds.x,
+                    x: bounds.x + handle_width / 2.0,
                     y: rail_y - style.rail.width / 2.0,
-                    width: offset + handle_width / 2.0,
+                    width: bounds.width - handle_width,
                     height: style.rail.width,
                 },
                 border: style.rail.border,
                 ..renderer::Quad::default()
             },
-            style.rail.backgrounds.0,
+            style.rail.backgrounds.1,
         );
 
+        // filled bar
         renderer.fill_quad(
             renderer::Quad {
                 bounds: Rectangle {
-                    x: bounds.x + offset + handle_width / 2.0,
+                    x: bounds.x + handle_width / 2.0,
                     y: rail_y - style.rail.width / 2.0,
-                    width: bounds.width - offset - handle_width / 2.0,
+                    width: offset,
                     height: style.rail.width,
                 },
                 border: style.rail.border,
                 ..renderer::Quad::default()
             },
-            style.rail.backgrounds.1,
+            style.rail.backgrounds.0,
         );
 
+        // handle
         renderer.fill_quad(
             renderer::Quad {
                 bounds: Rectangle {
@@ -503,7 +510,7 @@ where
                 },
                 ..renderer::Quad::default()
             },
-            style.handle.background,
+            Background::Color(Color::WHITE.scale_alpha(0.1)),
         );
     }
 

From 469be79283ee31d907f95a68ab2a8260216910a0 Mon Sep 17 00:00:00 2001
From: wiiznokes <78230769+wiiznokes@users.noreply.github.com>
Date: Thu, 26 Sep 2024 23:34:54 +0200
Subject: [PATCH 2/2] draw only a part of the background

---
 widget/src/slider.rs | 14 +++++++-------
 1 file changed, 7 insertions(+), 7 deletions(-)

diff --git a/widget/src/slider.rs b/widget/src/slider.rs
index bb843ece8d..fa2d8ec19a 100644
--- a/widget/src/slider.rs
+++ b/widget/src/slider.rs
@@ -464,34 +464,34 @@ where
 
         let rail_y = bounds.y + bounds.height / 2.0;
 
-        // background bar
+        // filled bar
         renderer.fill_quad(
             renderer::Quad {
                 bounds: Rectangle {
                     x: bounds.x + handle_width / 2.0,
                     y: rail_y - style.rail.width / 2.0,
-                    width: bounds.width - handle_width,
+                    width: offset,
                     height: style.rail.width,
                 },
                 border: style.rail.border,
                 ..renderer::Quad::default()
             },
-            style.rail.backgrounds.1,
+            style.rail.backgrounds.0,
         );
 
-        // filled bar
+        // background bar
         renderer.fill_quad(
             renderer::Quad {
                 bounds: Rectangle {
-                    x: bounds.x + handle_width / 2.0,
+                    x: bounds.x + (handle_width / 2.0) + offset,
                     y: rail_y - style.rail.width / 2.0,
-                    width: offset,
+                    width: bounds.width - (handle_width + offset),
                     height: style.rail.width,
                 },
                 border: style.rail.border,
                 ..renderer::Quad::default()
             },
-            style.rail.backgrounds.0,
+            style.rail.backgrounds.1,
         );
 
         // handle