Docs

Blog

Gallery

Resources

Learn

Components

API Reference

Onboarding

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

The on_change event handler is called when the value or checked state of the component changes.

on_change_end

Function or event handler called when the user is done selecting a new value(By dragging or clicking).

on_change_start

Function or event handler called when the user starts selecting a new value(By dragging or clicking).

The empty part of the slider that shows the track.

Props

No component specific props

Event Triggers

No component specific event triggers

The filled part of the slider.

Props

No component specific props

Event Triggers

No component specific event triggers

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

PropTypeDescriptionValues
box_sizestr

The size of the thumb.

Event Triggers

No component specific event triggers

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

Props

No component specific props

Event Triggers

No component specific event triggers

Did you find this useful?

HomeGalleryChangelogIntroductionHosting