core_widgets example slider fix (#19810)

# Objective

When dragging the slider thumb the thumb is only highlighted while the
pointer is hovering the widget. If the pointer moves off the widget
during a drag the thumb reverts to its normal unhovered colour.

## Solution

Query for `CoreSliderDragState` in the slider update systems and set the
lighter color if the thumb is dragged or hovered.
This commit is contained in:
ickshonpe 2025-06-29 18:41:41 +01:00 committed by GitHub
parent e9daac4f11
commit 8d70649e7d
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194

View File

@ -3,8 +3,8 @@
use bevy::{ use bevy::{
color::palettes::basic::*, color::palettes::basic::*,
core_widgets::{ core_widgets::{
CoreButton, CoreCheckbox, CoreRadio, CoreRadioGroup, CoreSlider, CoreSliderThumb, CoreButton, CoreCheckbox, CoreRadio, CoreRadioGroup, CoreSlider, CoreSliderDragState,
CoreWidgetsPlugin, SliderRange, SliderValue, TrackClick, CoreSliderThumb, CoreWidgetsPlugin, SliderRange, SliderValue, TrackClick,
}, },
ecs::system::SystemId, ecs::system::SystemId,
input_focus::{ input_focus::{
@ -398,6 +398,7 @@ fn update_slider_style(
&SliderValue, &SliderValue,
&SliderRange, &SliderRange,
&Hovered, &Hovered,
&CoreSliderDragState,
Has<InteractionDisabled>, Has<InteractionDisabled>,
), ),
( (
@ -405,6 +406,7 @@ fn update_slider_style(
Changed<SliderValue>, Changed<SliderValue>,
Changed<SliderRange>, Changed<SliderRange>,
Changed<Hovered>, Changed<Hovered>,
Changed<CoreSliderDragState>,
Added<InteractionDisabled>, Added<InteractionDisabled>,
)>, )>,
With<DemoSlider>, With<DemoSlider>,
@ -413,12 +415,12 @@ fn update_slider_style(
children: Query<&Children>, children: Query<&Children>,
mut thumbs: Query<(&mut Node, &mut BackgroundColor, Has<DemoSliderThumb>), Without<DemoSlider>>, mut thumbs: Query<(&mut Node, &mut BackgroundColor, Has<DemoSliderThumb>), Without<DemoSlider>>,
) { ) {
for (slider_ent, value, range, hovered, disabled) in sliders.iter() { for (slider_ent, value, range, hovered, drag_state, disabled) in sliders.iter() {
for child in children.iter_descendants(slider_ent) { for child in children.iter_descendants(slider_ent) {
if let Ok((mut thumb_node, mut thumb_bg, is_thumb)) = thumbs.get_mut(child) { if let Ok((mut thumb_node, mut thumb_bg, is_thumb)) = thumbs.get_mut(child) {
if is_thumb { if is_thumb {
thumb_node.left = Val::Percent(range.thumb_position(value.0) * 100.0); thumb_node.left = Val::Percent(range.thumb_position(value.0) * 100.0);
thumb_bg.0 = thumb_color(disabled, hovered.0); thumb_bg.0 = thumb_color(disabled, hovered.0 | drag_state.dragging);
} }
} }
} }
@ -426,17 +428,25 @@ fn update_slider_style(
} }
fn update_slider_style2( fn update_slider_style2(
sliders: Query<(Entity, &Hovered, Has<InteractionDisabled>), With<DemoSlider>>, sliders: Query<
(
Entity,
&Hovered,
&CoreSliderDragState,
Has<InteractionDisabled>,
),
With<DemoSlider>,
>,
children: Query<&Children>, children: Query<&Children>,
mut thumbs: Query<(&mut BackgroundColor, Has<DemoSliderThumb>), Without<DemoSlider>>, mut thumbs: Query<(&mut BackgroundColor, Has<DemoSliderThumb>), Without<DemoSlider>>,
mut removed_disabled: RemovedComponents<InteractionDisabled>, mut removed_disabled: RemovedComponents<InteractionDisabled>,
) { ) {
removed_disabled.read().for_each(|entity| { removed_disabled.read().for_each(|entity| {
if let Ok((slider_ent, hovered, disabled)) = sliders.get(entity) { if let Ok((slider_ent, hovered, drag_state, disabled)) = sliders.get(entity) {
for child in children.iter_descendants(slider_ent) { for child in children.iter_descendants(slider_ent) {
if let Ok((mut thumb_bg, is_thumb)) = thumbs.get_mut(child) { if let Ok((mut thumb_bg, is_thumb)) = thumbs.get_mut(child) {
if is_thumb { if is_thumb {
thumb_bg.0 = thumb_color(disabled, hovered.0); thumb_bg.0 = thumb_color(disabled, hovered.0 | drag_state.dragging);
} }
} }
} }