Docs

Blog

Gallery

Resources

Learn

Components

API Reference

Onboarding

Library

/

Forms

/

Slider

Provides user selection from a range of values.

rx.slider(default_value=40)

We can set the min and max values for the range of the slider. The defaults for min and max are 0 and 100.

The stepping interval can also be adjusted by using the step prop. It defaults to 1.

The on_value_commit event is called when the value changes at the end of an interaction. Useful when you only need to capture a final value e.g. to update a backend service.

50

Min=20 Max=240

Step=5

Step=0.5

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

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


def slider_max_min_step():
    return rx.vstack(
        rx.heading(SliderVariationState.value),
        rx.text("Min=20 Max=240"),
        rx.slider(
            default_value=40,
            min=20,
            max=240,
            on_value_commit=SliderVariationState.set_end,
        ),
        rx.text("Step=5"),
        rx.slider(
            default_value=40,
            step=5,
            on_value_commit=SliderVariationState.set_end,
        ),
        rx.text("Step=0.5"),
        rx.slider(
            default_value=40,
            step=0.5,
            on_value_commit=SliderVariationState.set_end,
        ),
        width="100%",
    )

When the disabled prop is set to True, it prevents the user from interacting with the slider.

rx.slider(default_value=40, disabled=True)

The default_value is the value of the slider when initially rendered. It can be a float or if multiple thumbs to drag are required then it can be passed as a List[float]. Providing multiple values creates a range slider.

rx.slider(default_value=45.5)
rx.slider(default_value=[40, 60])

The on_change event is called when the value of the slider changes.

50

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

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


def slider_on_change():
    return rx.vstack(
        rx.heading(SliderVariationState2.value),
        rx.slider(
            default_value=40,
            on_change=SliderVariationState2.set_end,
        ),
        width="100%",
    )

The name of the slider. Submitted with its owning form as part of a name/value pair.


Results

{}

class FormSliderState(rx.State):
    form_data: dict = {}

    def handle_submit(self, form_data: dict):
        """Handle the form submit."""
        self.form_data = form_data


def form_example2():
    return rx.vstack(
        rx.form.root(
            rx.vstack(
                rx.slider(default_value=40, name="slider"),
                rx.button("Submit", type="submit"),
                width="100%",
            ),
            on_submit=FormSliderState.handle_submit,
            reset_on_submit=True,
            width="100%",
        ),
        rx.chakra.divider(),
        rx.heading("Results"),
        rx.text(FormSliderState.form_data.to_string()),
        width="100%",
    )

Use the orientation prop to change the orientation of the slider.

rx.slider(default_value=40, orientation="horizontal")
rx.slider(
    default_value=40, height="4em", orientation="vertical"
)

classic

surface

soft

Accent

Gray

Disabled

rx.flex(
    rx.slider(default_value=25, size="1"),
    rx.slider(default_value=25, size="2"),
    rx.slider(default_value=25, size="3"),
    direction="column",
    spacing="4",
    width="100%",
)
rx.flex(
    rx.slider(default_value=25),
    rx.slider(default_value=25, high_contrast=True),
    direction="column",
    spacing="4",
    width="100%",
)
rx.flex(
    rx.slider(default_value=25, radius="none"),
    rx.slider(default_value=25, radius="small"),
    rx.slider(default_value=25, radius="full"),
    direction="column",
    spacing="4",
    width="100%",
)

Provides user selection from a range of values.

PropTypeDescriptionValues
as_childbool

Change the default rendered element for the one passed as a child, merging their props and behavior.

sizeLiteral

Button size "1" - "3"

variantLiteral

Variant of button

color_schemeLiteral

Override theme color for button

high_contrastbool

Whether to render the button with higher contrast color against background

radiusLiteral

Override theme radius for button: "none" | "small" | "full"

default_valueUnion

The value of the slider when initially rendered. Use when you do not need to control the state of the slider.

valueList

The controlled value of the slider. Must be used in conjunction with onValueChange.

namestr

The name of the slider. Submitted with its owning form as part of a name/value pair.

minUnion

The minimum value of the slider.

maxUnion

The maximum value of the slider.

stepUnion

The step value of the slider.

disabledbool

Whether the slider is disabled

orientationLiteral

The orientation of the slider.

Event Triggers

TriggerDescription
on_change

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

on_value_commit

The on_value_commit event handler is called when the value changes at the end of an interaction. Useful when you only need to capture a final value e.g. to update a backend service.

← SelectSwitch →

Did you find this useful?

HomeGalleryChangelogIntroductionHosting