Slider

Import

use maud_ui::primitives::slider::{self, Orientation, Props};

Example

use maud::html;
use maud_ui::primitives::slider;

// Single-thumb slider
html! {
    (slider::render(slider::Props {
        name: "volume".into(),
        id: "slider-volume".into(),
        value: 72.0,
        min: 0.0,
        max: 100.0,
        step: 1.0,
        label: "Volume".into(),
        show_value: true,
        ..Default::default()
    }))
}

// Multi-thumb range slider
html! {
    (slider::render(slider::Props {
        name: "price-range".into(),
        id: "slider-price".into(),
        values: vec![80.0, 320.0],
        min: 0.0,
        max: 500.0,
        step: 10.0,
        label: "Price range".into(),
        show_value: true,
        ..Default::default()
    }))
}

// Vertical slider
html! {
    (slider::render(slider::Props {
        name: "eq-mid".into(),
        id: "slider-eq".into(),
        value: 60.0,
        min: 0.0,
        max: 100.0,
        step: 1.0,
        label: "Mid frequency".into(),
        orientation: slider::Orientation::Vertical,
        ..Default::default()
    }))
}

Orientation Enum

Modes

Single-Thumb Mode

When values is empty, the slider renders one thumb at the position of value. Fill spans from 0 to the thumb.

Multi-Thumb (Range) Mode

When values is non-empty, the slider renders one thumb per value (sorted). Fill spans between the minimum and maximum values in the set. Single value is reflected to the hidden native <input> for form submission; multi-thumb state is driven by JS on data-values for progressive enhancement.

CSS Classes

Value Display

• Single-thumb: displays the current value (e.g., 72).
• Multi-thumb: displays a range with an en-dash (e.g., 80 — 320).
• Trailing zeros are stripped (e.g., 50.0 displays as 50, not 50.0).

Related

RangeSlider, Input, Form.

Shadcn reference

https://ui.shadcn.com/docs/components/base/slider