Add trailing_fill() toggle to Slider

CHANGELOG.md

@@ -8,6 +8,7 @@ NOTE: [`epaint`](crates/epaint/CHANGELOG.md), [`eframe`](crates/eframe/CHANGELOG
 * ⚠️ BREAKING: `egui::Context` now use closures for locking ([#2625](https://github.com/emilk/egui/pull/2625)):
   * `ctx.input().key_pressed(Key::A)` -> `ctx.input(|i| i.key_pressed(Key::A))`
   * `ui.memory().toggle_popup(popup_id)` -> `ui.memory_mut(|mem| mem.toggle_popup(popup_id))`
+* Add `Slider::trailing_fill` for trailing color behind the circle like a `ProgressBar` ([#2660](https://github.com/emilk/egui/pull/2660)).
 
 ### Added ⭐
 * Add `Response::drag_started_by` and `Response::drag_released_by` for convenience, similar to `dragged` and `dragged_by` ([#2507](https://github.com/emilk/egui/pull/2507)).

crates/egui/src/style.rs

@@ -506,6 +506,11 @@ pub struct Visuals {
     /// Wether or not Grids and Tables should be striped by default
     /// (have alternating rows differently colored).
     pub striped: bool,
+
+    /// Show trailing color behind the circle of a [`Slider`]. Default is OFF.
+    ///
+    /// Enabling this will affect ALL sliders, and can be enabled/disabled per slider with [`Slider::trailing_fill`].
+    pub slider_trailing_fill: bool,
 }
 
 impl Visuals {
@@ -764,6 +769,8 @@ impl Visuals {
             indent_has_left_vline: true,
 
             striped: false,
+
+            slider_trailing_fill: false,
         }
     }
 
@@ -1324,6 +1331,8 @@ impl Visuals {
             indent_has_left_vline,
 
             striped,
+
+            slider_trailing_fill: _,
         } = self;
 
         ui.collapsing("Background Colors", |ui| {

crates/egui/src/widgets/slider.rs

@@ -84,6 +84,7 @@ pub struct Slider<'a> {
     max_decimals: Option<usize>,
     custom_formatter: Option<NumFormatter<'a>>,
     custom_parser: Option<NumParser<'a>>,
+    trailing_fill: Option<bool>,
 }
 
 impl<'a> Slider<'a> {
@@ -129,6 +130,7 @@ impl<'a> Slider<'a> {
             max_decimals: None,
             custom_formatter: None,
             custom_parser: None,
+            trailing_fill: None,
         }
     }
 
@@ -269,6 +271,17 @@ impl<'a> Slider<'a> {
         self
     }
 
+    /// Display trailing color behind the slider's circle. Default is OFF.
+    ///
+    /// This setting can be enabled globally for all sliders with [`Visuals::slider_trailing_fill`].
+    /// Toggling it here will override the above setting ONLY for this individual slider.
+    ///
+    /// The fill color will be taken from `selection.bg_fill` in your [`Visuals`], the same as a [`ProgressBar`].
+    pub fn trailing_fill(mut self, trailing_fill: bool) -> Self {
+        self.trailing_fill = Some(trailing_fill);
+        self
+    }
+
     /// Set custom formatter defining how numbers are converted into text.
     ///
     /// A custom formatter takes a `f64` for the numeric value and a `RangeInclusive<usize>` representing
@@ -616,18 +629,41 @@ impl<'a> Slider<'a> {
             let rail_radius = ui.painter().round_to_pixel(self.rail_radius_limit(rect));
             let rail_rect = self.rail_rect(rect, rail_radius);
 
-            let position_1d = self.position_from_value(value, position_range);
-
             let visuals = ui.style().interact(response);
-            ui.painter().add(epaint::RectShape {
-                rect: rail_rect,
-                rounding: ui.visuals().widgets.inactive.rounding,
-                fill: ui.visuals().widgets.inactive.bg_fill,
-                stroke: Default::default(),
-            });
+            let widget_visuals = &ui.visuals().widgets;
+
+            ui.painter().rect_filled(
+                rail_rect,
+                widget_visuals.inactive.rounding,
+                widget_visuals.inactive.bg_fill,
+            );
 
+            let position_1d = self.position_from_value(value, position_range);
             let center = self.marker_center(position_1d, &rail_rect);
 
+            // Decide if we should add trailing fill.
+            let trailing_fill = match self.trailing_fill {
+                Some(override_bool) => override_bool,
+                None => ui.visuals().slider_trailing_fill,
+            };
+
+            // Paint trailing fill.
+            if trailing_fill {
+                let mut trailing_rail_rect = rail_rect;
+
+                // The trailing rect has to be drawn differently depending on the orientation.
+                match self.orientation {
+                    SliderOrientation::Vertical => trailing_rail_rect.min.y = center.y,
+                    SliderOrientation::Horizontal => trailing_rail_rect.max.x = center.x,
+                };
+
+                ui.painter().rect_filled(
+                    trailing_rail_rect,
+                    widget_visuals.inactive.rounding,
+                    ui.visuals().selection.bg_fill,
+                );
+            }
+
             ui.painter().add(epaint::CircleShape {
                 center,
                 radius: self.handle_radius(rect) + visuals.expansion,