Slider

An input where the user selects a value from within a given range.

Volume

Temperature (step: 5)

Disabled

Installation

biji-ui = { version = "0.5.0", features = ["slider"] }

Usage

use leptos::prelude::*;
use biji_ui::components::slider;

#[component]
pub fn MySlider() -> impl IntoView {
    view! {
        <slider::Root
            default_value=50.0
            class="relative flex items-center w-full h-5 touch-none select-none"
        >
            <slider::Track class="relative flex-1 h-2 overflow-hidden rounded-full bg-secondary">
                <slider::Range class="absolute h-full bg-primary" />
            </slider::Track>
            <slider::Thumb class="absolute block w-5 h-5 -translate-x-1/2 rounded-full border-2 border-primary bg-background shadow transition outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 focus:ring-offset-background" />
        </slider::Root>
    }
}

RootWith

Use <RootWith> when you need direct access to SliderState inside the children. The let:s binding exposes s.value and s.percentage as reactive signals for custom rendering.

Volume50

use leptos::prelude::*;
use biji_ui::components::slider;

#[component]
pub fn LabeledSlider() -> impl IntoView {
    let thumb_class = "absolute block w-5 h-5 -translate-x-1/2 rounded-full border-2 border-primary bg-background shadow transition outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 focus:ring-offset-background cursor-grab active:cursor-grabbing";

    view! {
        <slider::RootWith
            default_value=50.0
            min=0.0
            max=100.0
            class="flex flex-col gap-2 w-full"
            let:s
        >
            <div class="flex justify-between items-center text-sm">
                <span>"Volume"</span>
                <span class="tabular-nums font-medium">{move || s.value.get() as u32}</span>
            </div>
            <div class="relative flex items-center w-full h-5 touch-none select-none">
                <slider::Track class="relative h-2 w-full grow overflow-hidden rounded-full bg-secondary">
                    <slider::Range class="absolute h-full bg-primary" />
                </slider::Track>
                <slider::Thumb class={thumb_class} />
            </div>
        </slider::RootWith>
    }
}

API Reference

Root / RootWith

Name	Type	Default	Description
class	String	""	CSS class applied to the slider root element.
value	f64	0.0	The initial value of the slider.
min	f64	0.0	The minimum value of the slider.
max	f64	100.0	The maximum value of the slider.
step	f64	1.0	The step increment for keyboard navigation and snapping.
disabled	bool	false	When true, prevents the slider from being interacted with.

Track

Name	Type	Default	Description
class	String	""	CSS class applied to the track element.

Range

Name	Type	Default	Description
class	String	""	CSS class applied to the range fill element.

Thumb

Name	Type	Default	Description
class	String	""	CSS class applied to the thumb element.

Data Attributes

Attribute	Description
data-state	"enabled" when the slider is interactive; "disabled" when disabled. Present on Root.
data-disabled	Present on Root, Track, Range, and Thumb when the slider is disabled.
data-orientation	Always "horizontal". Present on Root, Track, and Range.

Keyboard Navigation

Key	Description
`ArrowRight / ArrowUp`	Increases the value by one step.
`ArrowLeft / ArrowDown`	Decreases the value by one step.
`Page Up`	Increases the value by ten steps.
`Page Down`	Decreases the value by ten steps.
`Home`	Sets the value to the minimum.
`End`	Sets the value to the maximum.