Dioxus Componentsdioxus

50%

Installation

Use the CLI command for the common path, or copy the component files manually.

Manual installation files

Copy the component source and CSS into your app. Import the shared theme CSS once near your app root.

use dioxus::prelude::*;
use dioxus_primitives::slider::{self, RangeSliderProps, SliderProps};

#[component]
pub fn Slider(props: SliderProps) -> Element {
    rsx! {
        document::Link { rel: "stylesheet", href: asset!("/src/components/slider/style.css") }
        slider::Slider {
            class: "dx-slider",
            value: props.value,
            default_value: props.default_value,
            min: props.min,
            max: props.max,
            step: props.step,
            disabled: props.disabled,
            horizontal: props.horizontal,
            inverted: props.inverted,
            on_value_change: props.on_value_change,
            label: props.label,
            attributes: props.attributes,
            slider::SliderTrack { class: "dx-slider-track",
                slider::SliderRange { class: "dx-slider-range" }
                slider::SliderThumb { class: "dx-slider-thumb" }
            }
        }
    }
}

#[component]
pub fn RangeSlider(props: RangeSliderProps) -> Element {
    rsx! {
        document::Link { rel: "stylesheet", href: asset!("/src/components/slider/style.css") }
        slider::RangeSlider {
            class: "dx-slider",
            value: props.value,
            default_value: props.default_value,
            min: props.min,
            max: props.max,
            step: props.step,
            disabled: props.disabled,
            horizontal: props.horizontal,
            inverted: props.inverted,
            on_value_change: props.on_value_change,
            label: props.label,
            attributes: props.attributes,
            slider::SliderTrack { class: "dx-slider-track",
                slider::SliderRange { class: "dx-slider-range" }
                slider::SliderThumb { class: "dx-slider-thumb", index: 0usize }
                slider::SliderThumb { class: "dx-slider-thumb", index: 1usize }
            }
        }
    }
}

Usage notes

The slider component allows users to select a value from a range by sliding a handle along a track.

Component Structure

Slider {
    value: 0.0,
    horizontal: true,
    on_value_change: |value: f64| {
        // Handle the change in slider value.
    },
}

For a two-thumb range selector, use RangeSlider:

RangeSlider {
    default_value: 20.0..80.0,
    on_value_change: |value: std::ops::Range<f64>| {
        // value.start and value.end give the two endpoints
    },
}

Direction / RTL

Slider/RangeSlider accept a dir: Option<Direction> prop, consulted only when horizontal: true (a vertical slider never mirrors, matching Radix). Under RTL: a click near the left end of the track resolves to a value near max (not min); ArrowLeft increases the value and ArrowRight decreases it (the opposite of LTR); the thumb and the filled range visually anchor to the opposite edge. ArrowUp/ArrowDown are never affected. See the rtl variant.

Variants

Alternative examples for common configurations.

dynamic_range

Percentage

50%

range

20 – 80

rtl

50%