Slider#

Allow users to adjust a value within a specified range by sliding a handle.

All sliders require the min, max and step properties, specifying the range of values the slider provides. Using smaller step values results in ever so slightly smoother sliders until they can be considered "continuous". You may exclude the step prop altogether to let the sliders use its full f64 precision.

let (value, set_value) = create_signal(6.0); view! { <Slider min=0.0 max=1.0 step=0.0001 value=value set_value=set_value value_display=move |v| format!("{v:.4}") /> }

The slider always operates with f64 values and may suffer from typical IEEE-math rounding problems. We use the value_display property to specify how a selected value should be rendered.

Example - Volume slider#

Continuous sliders are perfect when the exact value selected is of no particular interest to your user. For example, when operating a volume slider.

let (value, set_value) = create_signal(0.5); view! { <Stack orientation=StackOrientation::Horizontal spacing=Size::Zero> <Icon icon=icondata::BsVolumeDownFill style="font-size: 2.5em;"/> <Slider min=0.0 max=1.0 value=value set_value=set_value value_display=move |v| format!("{:.0}%", v * 100.0) style="width: 10em"/> <Icon icon=icondata::BsVolumeUpFill style="font-size: 2.5em; margin-left: 0.25em;"/> </Stack> }

Marks#

Small step values result in lesser selectable values, as only values starting from min and increased by multiples of step are selectable. To help visualize the selectable values of the slider, marks can be automatically generated.

let (value, set_value) = create_signal(6.0); view! { <Slider min=1.0 max=10.0 step=1.0 value=value set_value=set_value marks=SliderMarks::Automatic { create_names: false } value_display=move |v| format!("{v:.0}")/> }

Note that marks are only helpful when dealing with sliders having a limited number of selectable values, meaning ones with small ranges and a high stepping value. Automatic mark generation is currently limited to creating 20 evenly spaced marks so that continuous sliders will not create thousands of them.

You can also specify custom marks! Custom marks will be validated. If the specified value is outside the sliders [min..max] range or the percentage is outside the [0..1] range, the mark will be excluded and a warning will be logged to the console.

let (value, set_value) = create_signal(6.0); view! { <Slider min=1.0 max=10.0 step=1.0 value=value set_value=set_value marks=SliderMarks::Custom { marks: vec![ SliderMark { value: SliderMarkValue::Value(5.5), name: Some("5.5".into()) }, SliderMark { value: SliderMarkValue::Value(7.0), name: Some("7".into()) }, SliderMark { value: SliderMarkValue::Percentage(0.888), name: Some("88%".into()) }, SliderMark { value: SliderMarkValue::Value(20.0), name: Some("this mark will not show up".into()) } ] } value_display=move |v| format!("{v:.0}")/> }

5.5

88%

Arbitrary ranges#

Sliders can use any combination of min, max and step values.

You can also use a positive value for the min prop, and a negative value for the max prop, resulting in a reversed axis.

Range sliders#

A range of values can be selected using the RangeSlider component. The component requires two values and in return provides a slider with two control knobs, allowing you to select a range of values. One knob can be dragged over the other, letting them switch places.

let (value_a, set_value_a) = create_signal(0.5); let (value_b, set_value_b) = create_signal(0.75); view! { <RangeSlider value_a=range_a value_b=range_b set_value_a=set_value_a set_value_b=set_value_b min=0.0 max=1.0 popover=SliderPopover::Always value_display=move |v| format!("{v:.4}") /> }

Range sliders can also use marks, just like the normal slider.

Keyboard input#

Slider knobs are keyboard-interactable and can be cycled through using the Tab key. Manipulation of slider knobs using the error keys will come in a future update.

Styling#

You may overwrite any of the following CSS variables to meet your styling needs.

--slider-margin --slider-bar-height --slider-bar-background-color --slider-bar-background-image --slider-range-height --slider-range-background-color --slider-range-background-image --slider-knob-size --slider-knob-border-width --slider-knob-border-color --slider-knob-border-style --slider-knob-background-color --slider-knob-halo-size --slider-knob-halo-size-while-dragged --slider-knob-halo-opacity --slider-knob-halo-background-color --slider-knob-transition-speed --slider-knob-box-shadow --slider-mark-size --slider-mark-color --slider-mark-color-in-range --slider-mark-title-color --slider-mark-title-color-in-range

Docs