︲

︲

Slider

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

Installation

Copy the following code into your app directory.

uv

uv run buridan add component slider
from components.ui.slider import slider

Anatomy

Use the following composition to build a Slider component.

slider.root( slider.control( slider.track( slider.indicator(), slider.thumb(), ), ), )

Examples

Basic

A basic low-level slider demo.

import reflex as rx

from components.ui.slider import slider


def slider_demo():
    return rx.el.div(
        slider.root(
            slider.control(slider.track(slider.indicator(), slider.thumb())),
            default_value=20,
        ),
        class_name="w-full max-w-md flex justify-center",
    )

Range

Use an array with two values for a range slider.

import reflex as rx

from components.ui.slider import slider


def slider_range():
    return rx.el.div(
        slider.root(
            slider.control(
                slider.track(
                    slider.indicator(),
                    slider.thumb(),
                    slider.thumb(),
                ),
            ),
            default_value=[25, 50],
            max=100,
            step=5,
        ),
        class_name="w-full max-w-xs mx-auto flex justify-center",
    )

Vertical

Use orientation="vertical" for a vertical slider.

import reflex as rx

from components.ui.slider import slider


def slider_vertical():
    return rx.el.div(
        slider.root(
            slider.control(
                slider.track(slider.indicator(), slider.thumb()),
            ),
            default_value=[50],
            max=100,
            step=1,
            orientation="vertical",
            class_name="h-40",
        ),
        slider.root(
            slider.control(
                slider.track(slider.indicator(), slider.thumb()),
            ),
            default_value=[25],
            max=100,
            step=1,
            orientation="vertical",
            class_name="h-40",
        ),
        class_name="h-full mx-auto flex w-full max-w-xs items-center justify-center gap-6",
    )