UI Slider Widget

Cargo.toml

@@ -1438,6 +1438,16 @@ description = "Illustrates creating and updating a button"
 category = "UI (User Interface)"
 wasm = true
 
+[[example]]
+name = "slider"
+path = "examples/ui/slider.rs"
+
+[package.metadata.example.slider]
+name = "Slider"
+description = "Illustrates creating and updating a slider"
+category = "UI (User Interface)"
+wasm = true
+
 [[example]]
 name = "window_fallthrough"
 path = "examples/ui/window_fallthrough.rs"

crates/bevy_ui/src/focus.rs

@@ -1,4 +1,5 @@
 use crate::{camera_config::UiCameraConfig, CalculatedClip, Node, UiStack};
+use bevy_derive::{Deref, DerefMut};
 use bevy_ecs::{
     change_detection::DetectChanges,
     entity::Entity,
@@ -52,6 +53,25 @@ impl Default for Interaction {
     }
 }
 
+/// A component storing the position of the mouse relative to the node, (0., 0.) being the bottom-left corner and (1., 1.) being the upper-right
+/// I can be used alongside interaction to get the position of the press.
+/// If the mouse is not over the node, the value will go beyond the range of (0., 0.) to (1., 1.)
+#[derive(
+    Component,
+    Deref,
+    DerefMut,
+    Copy,
+    Clone,
+    Default,
+    PartialEq,
+    Debug,
+    Reflect,
+    Serialize,
+    Deserialize,
+)]
+#[reflect(Component, Serialize, Deserialize, PartialEq)]
+pub struct RelativeCursorPosition(Vec2);
+
 /// Describes whether the node should block interactions with lower nodes
 #[derive(Component, Copy, Clone, Eq, PartialEq, Debug, Reflect, Serialize, Deserialize)]
 #[reflect(Component, Serialize, Deserialize, PartialEq)]
@@ -86,6 +106,7 @@ pub struct NodeQuery {
     node: &'static Node,
     global_transform: &'static GlobalTransform,
     interaction: Option<&'static mut Interaction>,
+    relative_cursor_position: Option<&'static mut RelativeCursorPosition>,
     focus_policy: Option<&'static FocusPolicy>,
     calculated_clip: Option<&'static CalculatedClip>,
     computed_visibility: Option<&'static ComputedVisibility>,
@@ -177,16 +198,31 @@ pub fn ui_focus_system(
                 let ui_position = position.truncate();
                 let extents = node.node.size() / 2.0;
                 let mut min = ui_position - extents;
-                let mut max = ui_position + extents;
                 if let Some(clip) = node.calculated_clip {
                     min = Vec2::max(min, clip.clip.min);
-                    max = Vec2::min(max, clip.clip.max);
                 }
-                // if the current cursor position is within the bounds of the node, consider it for
+
+                // The mouse position relative to the node
+                // (0., 0.) is the bottom-left corner, (1., 1.) is the upper-right corner
+                let relative_cursor_postition = cursor_position.map(|cursor_position| {
+                    Vec2::new(
+                        (cursor_position.x - min.x) / node.node.size().x,
+                        (cursor_position.y - min.y) / node.node.size().y,
+                    )
+                });
+
+                // If the current cursor position is within the bounds of the node, consider it for
                 // clicking
-                let contains_cursor = if let Some(cursor_position) = cursor_position {
-                    (min.x..max.x).contains(&cursor_position.x)
-                        && (min.y..max.y).contains(&cursor_position.y)
+                let contains_cursor = if let Some(cursor_position) = relative_cursor_postition {
+                    // Save the relative cursor position to the correct component
+                    if let Some(mut relative_cursor_position_component) =
+                        node.relative_cursor_position
+                    {
+                        relative_cursor_position_component.0 = cursor_position;
+                    }
+
+                    ((0.)..1.).contains(&cursor_position.x)
+                        && ((0.)..1.).contains(&cursor_position.y)
                 } else {
                     false
                 };

crates/bevy_ui/src/lib.rs

@@ -91,6 +91,7 @@ impl Plugin for UiPlugin {
             .register_type::<FlexWrap>()
             .register_type::<FocusPolicy>()
             .register_type::<Interaction>()
+            .register_type::<RelativeCursorPosition>()
             .register_type::<JustifyContent>()
             .register_type::<Node>()
             // NOTE: used by Style::aspect_ratio
@@ -135,6 +136,14 @@ impl Plugin for UiPlugin {
                     .ambiguous_with(bevy_text::update_text2d_layout)
                     .ambiguous_with(widget::text_system),
             )
+            .add_system_to_stage(
+                CoreStage::PostUpdate,
+                widget::update_slider_value.label(widget::UpdateSliderValue),
+            )
+            .add_system_to_stage(
+                CoreStage::PostUpdate,
+                widget::update_slider_handle.after(widget::UpdateSliderValue),
+            )
             .add_system_to_stage(
                 CoreStage::PostUpdate,
                 flex_node_system

crates/bevy_ui/src/node_bundles.rs

@@ -1,7 +1,8 @@
 //! This module contains basic node bundles used to build UIs
 
 use crate::{
-    widget::Button, BackgroundColor, CalculatedSize, FocusPolicy, Interaction, Node, Style,
+    widget::{Button, Slider, SliderDragged, SliderHandle},
+    BackgroundColor, CalculatedSize, FocusPolicy, Interaction, Node, RelativeCursorPosition, Style,
     UiImage, ZIndex,
 };
 use bevy_ecs::bundle::Bundle;
@@ -213,3 +214,91 @@ pub struct ButtonBundle {
     /// Indicates the depth at which the node should appear in the UI
     pub z_index: ZIndex,
 }
+
+/// A UI node that is a slider
+#[derive(Bundle, Clone, Debug, Default)]
+pub struct SliderBundle {
+    /// Describes the size of the node
+    pub node: Node,
+    /// Slider specific values
+    pub slider: Slider,
+    /// Describes the cursor position relative to the slider node
+    pub relative_cursor: RelativeCursorPosition,
+    /// Describes whether and how the slider has been interacted with by the input
+    pub interaction: Interaction,
+    /// Whether the slider is currently being dragged by the user
+    pub dragged: SliderDragged,
+    /// Describes the style including flexbox settings
+    pub style: Style,
+    /// The background color, which serves as a "fill" for this node
+    ///
+    /// When combined with `UiImage`, tints the provided image.
+    pub background_color: BackgroundColor,
+    /// The image of the node
+    pub image: UiImage,
+    /// The transform of the node
+    ///
+    /// This field is automatically managed by the UI layout system.
+    /// To alter the position of the `NodeBundle`, use the properties of the [`Style`] component.
+    pub transform: Transform,
+    /// The global transform of the node
+    ///
+    /// This field is automatically managed by the UI layout system.
+    /// To alter the position of the `NodeBundle`, use the properties of the [`Style`] component.
+    pub global_transform: GlobalTransform,
+    /// Describes the visibility properties of the node
+    pub visibility: Visibility,
+    /// Algorithmically-computed indication of whether an entity is visible and should be extracted for rendering
+    pub computed_visibility: ComputedVisibility,
+}
+
+/// A UI node that is a slider
+#[derive(Bundle, Clone, Debug)]
+pub struct SliderHandleBundle {
+    /// Describes the size of the node
+    pub node: Node,
+    /// Marker component that signals this node is a slider handle
+    pub slider_handle: SliderHandle,
+    /// Describes the style including flexbox settings
+    /// The Slider parent is responsible for managing the position field, all user-made changes will be overwritten.
+    pub style: Style,
+    /// Whether this node should block interaction with lower nodes
+    pub focus_policy: FocusPolicy,
+    /// The background color, which serves as a "fill" for this node
+    ///
+    /// When combined with `UiImage`, tints the provided image.
+    pub background_color: BackgroundColor,
+    /// The image of the node
+    pub image: UiImage,
+    /// The transform of the node
+    ///
+    /// This field is automatically managed by the UI layout system.
+    /// To alter the position of the `NodeBundle`, use the properties of the [`Style`] component.
+    pub transform: Transform,
+    /// The global transform of the node
+    ///
+    /// This field is automatically managed by the UI layout system.
+    /// To alter the position of the `NodeBundle`, use the properties of the [`Style`] component.
+    pub global_transform: GlobalTransform,
+    /// Describes the visibility properties of the node
+    pub visibility: Visibility,
+    /// Algorithmically-computed indication of whether an entity is visible and should be extracted for rendering
+    pub computed_visibility: ComputedVisibility,
+}
+
+impl Default for SliderHandleBundle {
+    fn default() -> Self {
+        Self {
+            node: Node::default(),
+            slider_handle: SliderHandle,
+            style: Style::default(),
+            focus_policy: FocusPolicy::Pass,
+            background_color: BackgroundColor::default(),
+            image: UiImage::default(),
+            transform: Transform::default(),
+            global_transform: GlobalTransform::default(),
+            visibility: Visibility::default(),
+            computed_visibility: ComputedVisibility::default(),
+        }
+    }
+}

crates/bevy_ui/src/widget/mod.rs

@@ -2,8 +2,10 @@
 
 mod button;
 mod image;
+mod slider;
 mod text;
 
 pub use button::*;
 pub use image::*;
+pub use slider::*;
 pub use text::*;