Slider

Rust/UI Icons - ChevronLeftRust/UI Icons - ChevronRight

Rust/UI component that allows users to select a value from a range.

use leptos::prelude::*;

use crate::components::ui::slider::Slider;

#[component]
pub fn DemoSlider() -> impl IntoView {
    view! {
        <div class="flex flex-col gap-6">
            <Slider />
            <Slider attr:min="0" attr:max="100" attr:value="40" attr:step="5" />
            <Slider attr:disabled="true" attr:value="80" />
        </div>
    }
}

Installation

You can run either of the following commands:

# cargo install ui-cli --force
ui add demo_slider
ui add slider

Update the imports to match your project setup.

Copy and paste the following code into your project:

components/ui/slider.rs

use leptos::prelude::*;
use tw_merge::*;

#[derive(Default, Clone, Copy, PartialEq, Eq, strum::AsRefStr)]
pub enum SliderVariant {
    #[default]
    Round,
    Flat,
}

#[component]
pub fn Slider(
    #[prop(optional, into)] class: String,
    #[prop(default = SliderVariant::default())] variant: SliderVariant,
) -> impl IntoView {
    let variant_attr = variant.as_ref();

    let merged_class = tw_merge!(
        "overflow-hidden relative bg-transparent transition-all duration-100 ease-in-out appearance-none disabled:opacity-30 disabled:cursor-not-allowed text-[1.5rem] w-[12.5em] text-primary active:cursor-grabbing disabled:grayscale",
        class
    );

    view! { <input data-name="Slider" data-variant=variant_attr type="range" class=merged_class /> }
}

Update the imports to match your project setup.

Usage

use crate::components::ui::slider::Slider;
<Slider attr:min="0" attr:max="100" attr:value="40" attr:step="5" />

Examples

Flat

Slider component with flat styling for minimal visual design. This example demonstrates how to create sleek range sliders in Leptos with reduced shadows and borders for modern, understated UI aesthetics in Rust applications.

use leptos::prelude::*;

use crate::components::ui::slider::{Slider, SliderVariant};

#[component]
pub fn DemoSliderFlat() -> impl IntoView {
    view! {
        <div class="flex flex-col gap-6">
            <Slider variant=SliderVariant::Flat />
            <Slider variant=SliderVariant::Flat attr:min="0" attr:max="100" attr:value="25" attr:step="5" />
            <Slider variant=SliderVariant::Flat attr:disabled="true" attr:value="64" />
        </div>
    }
}

Get notified when new stuff drops.

Rust/UI Icons - Send
Rust/UI Icons - ChevronLeftSkeletonSonnerRust/UI Icons - ChevronRight