tessera_ui_basic_components::slider

Function slider

Source 
pub fn slider(args: impl Into<SliderArgs>, state: Arc<Mutex<SliderState>>)
Expand description

Renders a slider UI component that allows users to select a value in the range [0.0, 1.0].

The slider displays a horizontal track with a draggable thumb. The current value is visually represented by the filled portion of the track. The component is fully controlled: you must provide the current value and a callback to handle value changes.

§Parameters

  • args: Arguments for configuring the slider. See SliderArgs for all options. The most important are:
    • value (f32): The current value of the slider, in the range [0.0, 1.0].
    • on_change (Arc<dyn Fn(f32) + Send + Sync>): Callback invoked when the user changes the slider’s value.
    • width, track_height, active_track_color, inactive_track_color, disabled: Appearance and interaction options.
  • state: Shared state for the slider, used to track interaction (e.g., dragging, focus). Create and manage this using [use_state] or similar, and pass it to the slider for correct behavior.

§State Management

The state parameter must be an Arc<Mutex<SliderState>>. You can create and manage it using the use_state hook or any other state management approach compatible with your application.

§Example

use std::sync::Arc;
use parking_lot::Mutex;
use tessera_ui::Dp;
use tessera_ui_basic_components::slider::{slider, SliderArgs, SliderState, SliderArgsBuilder};

// In a real application, you would manage the state.
let slider_state = Arc::new(Mutex::new(SliderState::new()));

// Create a slider with a width of 200dp and an initial value of 0.5.
slider(
    SliderArgsBuilder::default()
        .width(Dp(200.0))
        .value(0.5)
        .on_change(Arc::new(|new_value| {
            // Update your application state here.
            println!("Slider value: {}", new_value);
        }))
        .build()
        .unwrap(),
    slider_state,
);

This example demonstrates how to create a stateful slider and respond to value changes by updating your own state.

§See Also