Add vertical slider support to bevy_ui_widgets slider (#21827)

# Objective

- Fixes the issue of vertical sliders not being functional. Previously,
when creating a vertical slider, the slider drag behavior was still
horizontal, meaning dragging left/right would change the value instead
of dragging up/down. Additionally, clicking on the slider track was
offset and didn't correctly map to the clicked position.

## Solution

The slider widget now automatically detects its orientation based on the
node's dimensions (`height > width` for vertical, otherwise horizontal)
and adjusts its interaction behavior accordingly:

1. **Orientation Detection**: Added automatic detection of slider
orientation by comparing `node.size().y` to `node.size().x` in both
`slider_on_pointer_down` and `slider_on_drag` functions.

2. **Drag Direction Fix**: 
- For vertical sliders, the drag calculation now uses the Y-axis
(`distance.y`) instead of X-axis
- The Y coordinate is properly inverted (since screen Y increases
downward) to match expected behavior (dragging up increases value)
- Thumb size calculation uses `thumb.size().y` for vertical sliders
instead of always using `thumb.size().x`

3. **Click Position Fix**:
- Fixed coordinate conversion from Bevy's center-origin coordinate
system to top/left-origin coordinates
- For vertical sliders: converts `local_pos.y` from `[-height/2,
+height/2]` to `[0, height]` before calculating the slider value
   - Accounts for thumb size offset to center the calculation properly
- Inverts the Y coordinate for vertical sliders since Y increases
downward

4. **Track Size Calculation**: Uses `node.size().y - thumb_size` for
vertical sliders and `node.size().x - thumb_size` for horizontal sliders
when calculating the available track space.

The changes are backward compatible - horizontal sliders continue to
work exactly as before, and the orientation detection is transparent to
users of the API.

## Testing

- **Manual Testing**: Created test application with both vertical and
horizontal sliders to verify:
- Vertical sliders respond correctly to vertical drag movements (up =
increase, down = decrease)
- Horizontal sliders continue to work correctly with horizontal drag
movements
- Clicking anywhere on the slider track correctly snaps to that position
for both orientations
  - Thumb positioning updates correctly during drag operations
  - Multiple sliders can coexist without interfering with each other

- **Edge Cases Tested**:
  - Clicking at the very top/bottom of vertical sliders
  - Clicking at the very left/right of horizontal sliders
  - Dragging from one extreme to the other
  - Rapid clicking and dragging interactions

**Areas that may need more testing:**
- Sliders with non-standard aspect ratios (very wide vertical sliders or
very tall horizontal sliders)
- Sliders with custom transforms/rotations applied
- Sliders in nested UI hierarchies with complex transforms

**How reviewers can test:**
1. Create a vertical slider (height > width) and verify:
   - Dragging up increases the value
   - Dragging down decreases the value
   - Clicking anywhere on the track snaps to that exact position
2. Create a horizontal slider (width > height) and verify it still works
as before
3. Test with multiple sliders of both orientations simultaneously

**Platforms tested:**
- macOS (Apple Silicon)

## Showcase

### Before
- Vertical sliders were unusable - dragging would move horizontally
instead of vertically
- Clicking on vertical slider tracks was offset, with clicks near the
bottom snapping to the middle instead


https://github.com/user-attachments/assets/9bda83e7-f46b-4626-9df3-a558526a8ab2



### After
- Vertical sliders work correctly with intuitive up/down drag behavior
- Clicking anywhere on the slider track accurately snaps to the clicked
position
- Both vertical and horizontal sliders work seamlessly together


https://github.com/user-attachments/assets/cca24288-4cbc-4ceb-828f-9ce7a735ade0



### Code Example

```rust
// Vertical slider - now works correctly!
commands.spawn((
    Node {
        width: Val::Px(12.0),
        height: Val::Px(300.0),  // height > width = vertical
        ..default()
    },
    Slider::default(),
    SliderValue(50.0),
    SliderRange::new(0.0, 100.0),
    // ... thumb and track children
));

// Horizontal slider - continues to work as before
commands.spawn((
    Node {
        width: Val::Px(300.0),
        height: Val::Px(12.0),  // width > height = horizontal
        ..default()
    },
    Slider::default(),
    SliderValue(50.0),
    SliderRange::new(0.0, 100.0),
    // ... thumb and track children
));
```

The orientation is automatically detected based on the node dimensions -
no API changes required!

---------

Co-authored-by: Alice Cecile <alice.i.cecile@gmail.com>

Author: DuckyBlender

Cargo.toml

@@ -3491,6 +3491,18 @@ description = "Illustrates how to access `winit::window::Window`'s `hittest` fun
 category = "UI (User Interface)"
 wasm = false
 
+[[example]]
+name = "vertical_slider"
+path = "examples/ui/vertical_slider.rs"
+doc-scrape-examples = true
+required-features = ["experimental_bevy_ui_widgets"]
+
+[package.metadata.example.vertical_slider]
+name = "Vertical Slider"
+description = "Simple example showing vertical and horizontal slider widgets with snap behavior and value labels"
+category = "UI (User Interface)"
+wasm = true
+
 [[example]]
 name = "font_atlas_debug"
 path = "examples/ui/font_atlas_debug.rs"

crates/bevy_ui_widgets/src/slider.rs

@@ -264,22 +264,49 @@ pub(crate) fn slider_on_pointer_down(
             return;
         }
 
+        // Detect orientation: vertical if height > width
+        let is_vertical = node.size().y > node.size().x;
+
         // Find thumb size by searching descendants for the first entity with SliderThumb
         let thumb_size = q_children
             .iter_descendants(press.entity)
-            .find_map(|child_id| q_thumb.get(child_id).ok().map(|thumb| thumb.size().x))
+            .find_map(|child_id| {
+                q_thumb.get(child_id).ok().map(|thumb| {
+                    if is_vertical {
+                        thumb.size().y
+                    } else {
+                        thumb.size().x
+                    }
+                })
+            })
             .unwrap_or(0.0);
 
         // Detect track click.
         let local_pos = transform.try_inverse().unwrap().transform_point2(
             press.pointer_location.position * node_target.scale_factor() / ui_scale.0,
         );
-        let track_width = node.size().x - thumb_size;
+        let track_size = if is_vertical {
+            node.size().y - thumb_size
+        } else {
+            node.size().x - thumb_size
+        };
+
         // Avoid division by zero
-        let click_val = if track_width > 0. {
-            local_pos.x * range.span() / track_width + range.center()
+        let click_val = if track_size > 0. {
+            if is_vertical {
+                // For vertical sliders: bottom-to-top (0 at bottom, max at top)
+                // local_pos.y ranges from -height/2 (top) to +height/2 (bottom)
+                let y_from_bottom = (node.size().y / 2.0) - local_pos.y;
+                let adjusted_y = y_from_bottom - thumb_size / 2.0;
+                adjusted_y * range.span() / track_size + range.start()
+            } else {
+                // For horizontal sliders: convert from center-origin to left-origin
+                let x_from_left = local_pos.x + node.size().x / 2.0;
+                let adjusted_x = x_from_left - thumb_size / 2.0;
+                adjusted_x * range.span() / track_size + range.start()
+            }
         } else {
-            0.
+            range.center()
         };
 
         // Compute new value from click position
@@ -330,7 +357,6 @@ pub(crate) fn slider_on_drag(
     mut event: On<Pointer<Drag>>,
     mut q_slider: Query<
         (
-            &SliderValue,
             &ComputedNode,
             &SliderRange,
             Option<&SliderPrecision>,
@@ -345,23 +371,42 @@ pub(crate) fn slider_on_drag(
     mut commands: Commands,
     ui_scale: Res<UiScale>,
 ) {
-    if let Ok((value, node, range, precision, transform, drag, disabled)) =
-        q_slider.get_mut(event.entity)
+    if let Ok((node, range, precision, transform, drag, disabled)) = q_slider.get_mut(event.entity)
     {
         event.propagate(false);
         if drag.dragging && !disabled {
+            // Detect orientation: vertical if height > width
+            let is_vertical = node.size().y > node.size().x;
+
             let mut distance = event.distance / ui_scale.0;
             distance.y *= -1.;
             let distance = transform.transform_vector2(distance);
+
             // Find thumb size by searching descendants for the first entity with SliderThumb
             let thumb_size = q_children
                 .iter_descendants(event.entity)
-                .find_map(|child_id| q_thumb.get(child_id).ok().map(|thumb| thumb.size().x))
+                .find_map(|child_id| {
+                    q_thumb.get(child_id).ok().map(|thumb| {
+                        if is_vertical {
+                            thumb.size().y
+                        } else {
+                            thumb.size().x
+                        }
+                    })
+                })
                 .unwrap_or(0.0);
-            let slider_width = ((node.size().x - thumb_size) * node.inverse_scale_factor).max(1.0);
+
+            let slider_size = if is_vertical {
+                ((node.size().y - thumb_size) * node.inverse_scale_factor).max(1.0)
+            } else {
+                ((node.size().x - thumb_size) * node.inverse_scale_factor).max(1.0)
+            };
+
+            let drag_distance = if is_vertical { distance.y } else { distance.x };
+
             let span = range.span();
             let new_value = if span > 0. {
-                drag.offset + (distance.x * span) / slider_width
+                drag.offset + (drag_distance * span) / slider_size
             } else {
                 range.start() + span * 0.5
             };
@@ -371,12 +416,10 @@ pub(crate) fn slider_on_drag(
                     .unwrap_or(new_value),
             );
 
-            if rounded_value != value.0 {
-                commands.trigger(ValueChange {
-                    source: event.entity,
-                    value: rounded_value,
-                });
-            }
+            commands.trigger(ValueChange {
+                source: event.entity,
+                value: rounded_value,
+            });
         }
     }
 }

examples/README.md

@@ -595,6 +595,7 @@ Example | Description
 [UI Texture Slice Flipping and Tiling](../examples/ui/ui_texture_slice_flip_and_tile.rs) | Illustrates how to flip and tile images with 9 Slicing in UI
 [UI Transform](../examples/ui/ui_transform.rs) | An example demonstrating how to translate, rotate and scale UI elements.
 [UI Z-Index](../examples/ui/z_index.rs) | Demonstrates how to control the relative depth (z-position) of UI elements
+[Vertical Slider](../examples/ui/vertical_slider.rs) | Simple example showing vertical and horizontal slider widgets with snap behavior and value labels
 [Viewport Debug](../examples/ui/viewport_debug.rs) | An example for debugging viewport coordinates
 [Viewport Node](../examples/ui/viewport_node.rs) | Demonstrates how to create a viewport node with picking support
 [Virtual Keyboard](../examples/ui/virtual_keyboard.rs) | Example demonstrating a virtual keyboard widget