Reflex Logo

Intro

Gallery

Hosting

Learn

Components

Recipes

API Reference

Onboarding
Hosting

Library

/

Chakra

/

Forms

/

Slider

The Slider is used to allow users to make selections from a range of values.

50

class SliderState(rx.State):
    value: int = 50


def slider_example():
    return rx.chakra.vstack(
        rx.chakra.heading(SliderState.value),
        rx.chakra.slider(on_change=SliderState.set_value),
        width="100%",
    )

You can also combine all three event handlers: on_change, on_change_start, and on_change_end.

50

class SliderCombo(rx.State):
    value: int = 50
    color: str = "black"

    def set_start(self, value):
        self.color = "#68D391"

    def set_end(self, value):
        self.color = "#F56565"


def slider_combo_example():
    return rx.chakra.vstack(
        rx.chakra.heading(
            SliderCombo.value, color=SliderCombo.color
        ),
        rx.chakra.slider(
            on_change_start=SliderCombo.set_start,
            on_change=SliderCombo.set_value,
            on_change_end=SliderCombo.set_end,
        ),
        width="100%",
    )

You can also customize the appearance of the slider by passing in custom components for the track and thumb.

Weather is 50 degrees

class SliderManual(rx.State):
    value: int = 50

    def set_end(self, value: int):
        self.value = value


def slider_manual_example():
    return rx.chakra.vstack(
        rx.chakra.heading(
            f"Weather is {SliderManual.value} degrees"
        ),
        rx.chakra.slider(
            rx.chakra.slider_track(
                rx.chakra.slider_filled_track(bg="tomato"),
                bg="red.100",
            ),
            rx.chakra.slider_thumb(
                rx.chakra.icon(tag="sun", color="white"),
                box_size="1.5em",
                bg="tomato",
            ),
            on_change_end=SliderManual.set_end,
        ),
        width="100%",
    )

If you want to trigger state change on every slider movement, you can use the on_change event handler.

For performance reasons, you may want to trigger state change only when the user releases the slider by using the on_change_end event handler, but if you need perform an event on every slider movement, you can use the on_change event handler.

50

rx.chakra.vstack(
    rx.chakra.heading(SliderState.value),
    rx.chakra.slider(on_change=SliderState.set_value),
    width="100%",
)

The wrapper that provides context and functionality for all children.

PropTypeDescriptionValues
valueint

State var to bind the input.

color_schemestr

The color scheme.

default_valueint

The placeholder text.

directionLiteral

The writing mode ("ltr" | "rtl")

focus_thumb_on_changebool

If false, the slider handle will not capture focus when value changes.

is_disabledbool

If true, the slider will be disabled

is_read_onlybool

If true, the slider will be in read-only state.

is_reversedbool

If true, the value will be incremented or decremented in reverse.

min_int

The minimum value of the slider.

max_int

The maximum value of the slider.

stepint

The step in which increments/decrements have to be made

min_steps_between_thumbsint

The minimum distance between slider thumbs. Useful for preventing the thumbs from being too close together.

orientationLiteral

Oreintation of the slider vertical | horizontal.

min_hstr

Minimum height of the slider.

min_wstr

Minimum width of the slider.

max_hstr

Maximum height of the slider.

max_wstr

Maximum width of the slider.

namestr

The name of the form field

Event Triggers

TriggerDescription
on_change

Fired when the value changes.

on_change_start

Fired when the value starts changing.

on_change_end

Fired when the value stops changing.

The empty part of the slider that shows the track.

Props

No component specific props

The filled part of the slider.

Props

No component specific props

The handle that's used to change the slider value.

PropTypeDescriptionValues
box_sizestr

The size of the thumb.

The label or mark that shows names for specific slider values.

Props

No component specific props

Did you find this useful?

HomeGalleryChangelogIntroductionHosting