Core slider #19584

viridia · 2025-06-11T16:42:22Z

Objective

This is part of the "core widgets" effort: #19236.

Solution

This PR adds the "core slider" widget to the collection.

Testing

Tested using examples core_widgets and core_widgets_observers.

crates/bevy_core_widgets/src/core_slider.rs

alice-i-cecile

Minor suggestions, but this is looking good. Like always, please push back against me where you disagree.

crates/bevy_core_widgets/src/core_slider.rs

ickshonpe · 2025-06-13T11:43:15Z

crates/bevy_core_widgets/src/core_slider.rs

+    if let Ok((slider, value, range, step, disabled)) = q_slider.get(trigger.target().unwrap()) {
+        let event = &trigger.event().input;
+        if !disabled && event.state == ButtonState::Pressed {
+            let new_value = match event.key_code {


Could also have a shift + left/right big step here.

How big? A fixed multiplier of StepSize (say 5x), or do we want a more complex StepSize?

I think the multiplier would need to be configurable, depending on the range it can easily be way too big or too small otherwise.

I think I would like to punt on this for now:

I don't want to get too elaborate.

This is outside the bounds of use cases I'm familiar with - I want to stay grounded and not add features based on speculation.

I just checked the behavior of range sliders in HTML and they don't do this.

That being said, if someone comes along and has a practical need for this, I'm happy to reconsider.

Yeah I'm fine with leaving this for now, it's not essential.

ickshonpe · 2025-06-13T12:50:04Z

examples/ui/core_widgets_observers.rs

+                        width: Val::Px(12.0),
+                        height: Val::Px(12.0),
+                        position_type: PositionType::Absolute,
+                        left: Val::Percent(0.0), // This will be updated by the slider's value
                        ..default()
                    },


We can use UI transform so the thumb is positioned at its center, then the parent doesn't need to know the thumb's size.

Suggested change

},

},

UiTransform::from_translation(Val2::percent(-50., -50.)),

In response to this, I've updated the comment on CoreSlider with a long explanation of thumb positioning and travel. The goal here is to ensure that during dragging, the visible offset between pointer position and the thumb remains constant. This means that both the absolute positioning of the thumb, and the calculation of the slider value during dragging, need to use the same divisor - otherwise the thumb will move either slower or faster than the mouse. This is even more critical in "snap" clicking mode.

Positioning from the center, like you suggest, will work, but does not remove the responsibility of the stylist to account for the reduced travel to accommodate the thumb width. Note that it is perfectly acceptable to have a zero-width thumb with additional absolutely positioned decorative elements, if you want the thumb to overhang the ends. But for something like an editor, where sliders are often going to be lined up in a column with other widgets (like your text editor) we will want to avoid overhang so that the ends of the sliders line up nicely with the other widgets and produce a straight margin.

ickshonpe · 2025-06-13T12:51:11Z

examples/ui/core_widgets_observers.rs

+                    display: Display::Flex,
+                    position_type: PositionType::Absolute,
+                    left: Val::Px(0.0),
+                    // Track is short by 12px to accommodate the thumb. This should match thumb_size
+                    right: Val::Px(12.0),
+                    top: Val::Px(0.0),
+                    bottom: Val::Px(0.0),


Suggested change

display: Display::Flex,

position_type: PositionType::Absolute,

left: Val::Px(0.0),

// Track is short by 12px to accommodate the thumb. This should match thumb_size

right: Val::Px(12.0),

top: Val::Px(0.0),

bottom: Val::Px(0.0),

position_type: PositionType::Absolute,

left: Val::Px(3.0),

right: Val::Px(3.0),

I think it should be possible to simplify things further and move all these constraints to the background rail so we don't need to specify left and right here, but I've not been doing much CSS lately 😓.

Oh, I just didn't realise that the track wasn't a child of the visible rail. With the rail parenting the track it all composes nicely:

// Slider background rail Spawn(( Node { flex_direction: FlexDirection::Column, padding: UiRect::all(Val::Px(3.)), ..default() }, BackgroundColor(SLIDER_TRACK), // Border color for the checkbox BorderRadius::MAX, children![( // Invisible track to allow absolute placement of thumb entity. This is narrower than // the actual slider, which allows us to position the thumb entity using simple // percentages, without having to measure the actual width of the slider thumb. Node::default(), children![( // Thumb DemoSliderThumb, CoreSliderThumb, Node { position_type: PositionType::Absolute, width: Val::Px(12.0), aspect_ratio: Some(1.), left: Val::Percent(0.0), // This will be updated by the slider's value ..default() }, UiTransform::from_translation(Val2::percent(-50., -50.)), BorderRadius::MAX, BackgroundColor(SLIDER_THUMB), )], )], )),

examples/ui/core_widgets_observers.rs

ickshonpe · 2025-06-13T13:20:12Z

crates/bevy_core_widgets/src/core_slider.rs

+/// shorctuts. Defaults to 1.0.
+#[derive(Component, Debug, PartialEq, Clone)]
+#[component(immutable)]
+pub struct SliderStep(pub f32);


This name might be confusing if we want to add support for discrete ranges later on (or would that be a separate widget?).

The question of discrete ranges is something I have given a lot of thought to.

First, I'm not confident that I could build a slider that is generic in the value type (integer vs. float) due to the fact that we have so many different components and observers that all need to work together.

One solution is to quantize after the fact: that is, the callback can truncate or modify the value as it wishes, and display the value as an integer. This also permits other kinds of trickery, like log-scale sliders.

That being said I have ideas for other kinds of widgets, some of which would edit discrete values - such as a "game difficulty" chooser which lets you pick between a set of text labels.

ickshonpe · 2025-06-13T14:32:35Z

examples/ui/core_widgets_observers.rs

+            display: Display::Flex,
+            flex_direction: FlexDirection::Column,
+            justify_content: JustifyContent::Center,
+            align_items: AlignItems::Stretch,
+            justify_items: JustifyItems::Center,
+            column_gap: Val::Px(4.0),
+            height: Val::Px(12.0),
+            width: Val::Percent(30.0),
+            ..default()


Suggested change

display: Display::Flex,

flex_direction: FlexDirection::Column,

justify_content: JustifyContent::Center,

align_items: AlignItems::Stretch,

justify_items: JustifyItems::Center,

column_gap: Val::Px(4.0),

height: Val::Px(12.0),

width: Val::Percent(30.0),

..default()

flex_direction: FlexDirection::Column,

height: Val::Px(12.0),

width: Val::Percent(30.0),

..default()

ickshonpe

With a UiScale != 1 slider dragging breaks. Hover isn't affected and the sliders seem to work correctly with different window scale factors though so I think it isn't anything wrong here. The culprit is probably a bug in the picking backend somewhere.

viridia · 2025-06-13T15:19:55Z

With a UiScale != 1 slider dragging breaks. Hover isn't affected and the sliders seem to work correctly with different window scale factors though so I think it isn't anything wrong here. The culprit is probably a bug in the picking backend somewhere.

That's strange. I'm developing on a MacBook Pro, which normally has a scaling factor of 2 (assuming we're talking about the same thing).

ickshonpe · 2025-06-13T15:26:36Z

That's strange. I'm developing on a MacBook Pro, which normally has a scaling factor of 2 (assuming we're talking about the same thing).

UiScale is a different thing, it's a resource you can use to set a global UI scaling for all UI elements. The window scale factor and UiScale are multiplied together to get the final scaling. So on your MacBook Pro with UiScale set to 3 you'd get a final scale factor of 6.

ickshonpe

I think these changes should fix the UiScale bugs for now.

crates/bevy_core_widgets/src/core_slider.rs

crates/bevy_core_widgets/Cargo.toml

Widgets are now uncontrolled if there is no callback, controlled otherwise.

Accommodate UiScale. Co-authored-by: ickshonpe <david.curthoys@googlemail.com>

Co-authored-by: ickshonpe <david.curthoys@googlemail.com>

viridia · 2025-06-13T17:58:37Z

I had to do an unpleasant rebase and force push because of all the changes to Trigger.

crates/bevy_core_widgets/src/core_slider.rs

Don't allow track click while disabled. Don't set focus to thumb.

MalekiRe

Played around with this a lot, the code is great, LGTM

# Objective This is part of the "core widgets" effort: bevyengine#19236. ## Solution This PR adds the "core slider" widget to the collection. ## Testing Tested using examples `core_widgets` and `core_widgets_observers`. --------- Co-authored-by: ickshonpe <david.curthoys@googlemail.com>

theotherphil reviewed Jun 11, 2025

View reviewed changes

crates/bevy_core_widgets/src/core_slider.rs Show resolved Hide resolved

alice-i-cecile added this to the 0.17 milestone Jun 11, 2025

viridia force-pushed the core_slider branch from 4485a20 to 92e9717 Compare June 12, 2025 02:07

UkoeHB reviewed Jun 12, 2025

View reviewed changes

crates/bevy_core_widgets/src/core_slider.rs Outdated Show resolved Hide resolved

alice-i-cecile reviewed Jun 13, 2025

View reviewed changes

crates/bevy_core_widgets/src/core_slider.rs Show resolved Hide resolved

alice-i-cecile reviewed Jun 13, 2025

View reviewed changes

crates/bevy_core_widgets/src/core_slider.rs Outdated Show resolved Hide resolved

alice-i-cecile reviewed Jun 13, 2025

View reviewed changes

crates/bevy_core_widgets/src/core_slider.rs Show resolved Hide resolved

alice-i-cecile requested changes Jun 13, 2025

View reviewed changes

alice-i-cecile reviewed Jun 13, 2025

View reviewed changes

crates/bevy_core_widgets/src/core_slider.rs Outdated Show resolved Hide resolved

alice-i-cecile approved these changes Jun 13, 2025

View reviewed changes

ickshonpe self-requested a review June 13, 2025 11:26

ickshonpe reviewed Jun 13, 2025

View reviewed changes

crates/bevy_core_widgets/src/core_slider.rs Outdated Show resolved Hide resolved

crates/bevy_core_widgets/src/core_slider.rs Show resolved Hide resolved

ickshonpe reviewed Jun 13, 2025

View reviewed changes

crates/bevy_core_widgets/src/core_slider.rs Show resolved Hide resolved

crates/bevy_core_widgets/src/core_slider.rs Show resolved Hide resolved

Core slider widget.

c9d7469

ickshonpe suggested changes Jun 13, 2025

View reviewed changes

crates/bevy_core_widgets/src/core_slider.rs Outdated Show resolved Hide resolved

crates/bevy_core_widgets/Cargo.toml Show resolved Hide resolved

viridia added 4 commits June 13, 2025 10:37

Added observer-based example for sliders.

68f9102

Add PR number to release note.

e61721a

Add SetSliderValue event.

c560b6e

Track clicking behavior options.

2a8ece6

viridia and others added 9 commits June 13, 2025 10:44

Improve comments.

f442fec

Don't panic if no focus resource.

f70ae94

Incorrect comment.

82a7557

Automatic thumb size measurement.

b7b0a09

Added doc test.

717c6c6

Widgets are now uncontrolled if there is no callback, controlled otherwise.

SliderRange no longer relies on RangeInclusive.

4123e82

Updated documentation based on review feedback.

5c6d30e

Apply suggestions from code review

52a6543

Accommodate UiScale. Co-authored-by: ickshonpe <david.curthoys@googlemail.com>

Added import for UiScale.

dbcd8f1

viridia force-pushed the core_slider branch from d126930 to dbcd8f1 Compare June 13, 2025 17:46

viridia and others added 2 commits June 13, 2025 10:53

Make sliders work with arbitrary transforms.

26ccd9c

Co-authored-by: ickshonpe <david.curthoys@googlemail.com>

Make sliders work with arbitrary transforms.

8d8b9bc

Co-authored-by: ickshonpe <david.curthoys@googlemail.com>

alice-i-cecile requested a review from ickshonpe June 13, 2025 17:59

viridia added 3 commits June 13, 2025 13:06

Fix broken doc test.

e5c333e

Fix doc test.

1399d29

Yet another attempt to fix broken doc ci.

9f48569

ickshonpe reviewed Jun 14, 2025

View reviewed changes

crates/bevy_core_widgets/src/core_slider.rs Outdated Show resolved Hide resolved

crates/bevy_core_widgets/src/core_slider.rs Show resolved Hide resolved

crates/bevy_core_widgets/src/core_slider.rs Show resolved Hide resolved

viridia added 2 commits June 13, 2025 17:33

Don't allow dragging while disabled.

c605612

Don't allow track click while disabled. Don't set focus to thumb.

Added RelativeStep option to SetSliderValue.

25b8287

MalekiRe approved these changes Jun 15, 2025

View reviewed changes

alice-i-cecile added S-Ready-For-Final-Review This PR has been approved by the community. It's ready for a maintainer to consider merging it and removed S-Needs-Review Needs reviewer attention (from anyone!) to move forward labels Jun 15, 2025

alice-i-cecile added this pull request to the merge queue Jun 15, 2025

Merged via the queue into bevyengine:main with commit 30aa36e Jun 15, 2025
38 checks passed

viridia deleted the core_slider branch June 20, 2025 18:17

viridia restored the core_slider branch June 20, 2025 18:18

viridia deleted the core_slider branch July 7, 2025 22:19

	},
	},
	UiTransform::from_translation(Val2::percent(-50., -50.)),

Uh oh!

Core slider #19584

Core slider #19584

Uh oh!

Conversation

viridia commented Jun 11, 2025

Objective

Solution

Testing

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

alice-i-cecile left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

ickshonpe Jun 13, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

ickshonpe Jun 13, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

ickshonpe left a comment • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

viridia commented Jun 13, 2025

Uh oh!

ickshonpe commented Jun 13, 2025

Uh oh!

ickshonpe left a comment • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

viridia commented Jun 13, 2025

Uh oh!

Uh oh!

Uh oh!

Uh oh!

MalekiRe left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

ickshonpe Jun 13, 2025 •

edited

Loading

ickshonpe Jun 13, 2025 •

edited

Loading

ickshonpe left a comment •

edited

Loading

ickshonpe left a comment •

edited

Loading