Slider
An input where the user selects a value from within a given range.
use leptos::prelude::*; use singlestage::*; #[component] pub fn SliderExample() -> impl IntoView { view! { <Slider default=75. max=100. step=1. class="mx-auto w-full max-w-xs" /> } }
Vertical
Use the orientation prop to change between horizontal and vertical orientations.
use leptos::prelude::*; use singlestage::*; #[component] pub fn SliderVerticalExample() -> impl IntoView { view! { <div class="mx-auto flex w-full max-w-xs items-center justify-center gap-6"> <Slider default=50. max=100. step=1. orientation="vertical" class="h-40" /> <Slider default=25. max=100. step=1. orientation="vertical" class="h-40" /> </div> } }
Controlled
0.3
use leptos::prelude::*; use singlestage::*; #[component] pub fn SliderControlledExample() -> impl IntoView { let value = RwSignal::new(0.3); view! { <div class="mx-auto grid w-full max-w-xs gap-3"> <div class="flex items-center justify-between gap-2"> <Label label_for="slider-demo-temperature">"Temperature"</Label> <span class="text-sm text-muted-foreground">{move || value.get().to_string()}</span> </div> <Slider id="slider-demo-temperature" value min=0. max=1. step=0.1 /> </div> } }
Disabled
Use the disabled prop to disable the slider.
use leptos::prelude::*; use singlestage::*; #[component] pub fn SliderDisabledExample() -> impl IntoView { view! { <Slider default=50. max=100. step=1. disabled=true class="mx-auto w-full max-w-xs" /> } }
Anatomy
Import all parts and piece them together.
use leptos::prelude::*; #[component] pub fn SliderAnatomy() -> impl IntoView { view! { <Slider /> } }
API Reference
Slider
An input where the user selects a value from within a given range.
| Name | Type | Default | Description |
|---|---|---|---|
| default | f64 | 0.0 | Sets the default value of the element. Setting `value` sets this once at page load. Use this for subsequent updates. |
| max | f64 | 100.0 | The greatest value in the range of permitted values. |
| min | f64 | 0.0 | The lowest value in the range of permitted values. |
| orientation | String | "horizontal" | Set the orientation to render the slider. Accepted values: "vertical", "horizontal". |
| step | f64 | 1.0 | Define the granularity of the expected input value. |
| value | f64 | 0.0 | A reactive signal coupled to the input's value. |