Slider

Rust/UI Icons - ChevronLeftRust/UI Icons - ChevronRight

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

  • Rust/UI Icons - CopyCopy Demo
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

  • Rust/UI Icons - CopyCopy Demo
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>
    }
}
Rust/UI Icons - ChevronLeftSkeletonSonnerRust/UI Icons - ChevronRight