Skip to main content

range_slider

Function range_slider 

Source
pub fn range_slider() -> RangeSliderBuilder
Expand description

§range_slider

Select interval endpoints using two independently focusable handles.

§Usage

Use for filtering by range, setting minimum and maximum values, or defining an interval.

Arrow keys move one step. Home and End select the allowed bounds, and PageUp and PageDown move up to ten steps. Continuous sliders use 1% keyboard steps. Tab keeps a fixed start-then-end handle order; handles cannot cross their neighbor.

Supplied endpoints are clamped to 0–1 and rounded to the nearest discrete ticks. Ties round upward and NaN resolves to zero. An end below the normalized start is raised to the start. This normalization does not call on_change or modify caller-owned state.

§Parameters

  • modifier — slider placement and size constraints.

  • value, on_change — controlled interval and change callback.

  • orientation, reverse_direction — physical axis and increasing-value direction.

  • size, thumb_diameter — track size and handle width.

  • active_track_color, inactive_track_color, thumb_color — optional colors.

  • active_tick_color, inactive_tick_color — optional tick foregrounds; inactive tick color also applies to end stops.

  • disabled — whether pointer, keyboard, and accessibility input are disabled.

  • accessibility_label, accessibility_description — accessible control name and details.

  • show_stop_indicator, steps — end stops and the number of intermediate steps.

  • controller — optional shared focus and drag state.

  • start_accessibility_label, end_accessibility_label — optional names for each handle.

  • value_indicator — hidden by default; show focused/dragged handles or all enabled handles. Pass the host received from slider_value_indicator_provider.

  • value_indicator_host — overlay target received from the provider slot.

  • start_value_label, end_value_label — optional formatted labels and screen-reader values; defaults are rounded percentages without percent signs.

§Examples

use tessera_components::modifier::ModifierExt as _;
use tessera_components::slider::{SliderOrientation, range_slider};
use tessera_ui::{Dp, Modifier, remember};
let range_value = remember(|| (0.2f32, 0.8f32));

range_slider()
    .modifier(Modifier::new().height(Dp(200.0)))
    .orientation(SliderOrientation::Vertical)
    .reverse_direction(true)
    .value(range_value.get())
    .on_change(move |(start, end)| {
        range_value.set((start, end));
    });
assert_eq!(range_value.get(), (0.2, 0.8));