Intro

Gallery

Hosting

Components

New

Learn

Components

API Reference

Onboarding

Getting Started

Tutorial

Hosting

Reflex Deploy

Self Hosting

Library

Forms

Slider

Provides user selection from a range of values.

Basic Example

rx.slider(default_value=40)

Setting slider defaults

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%",
    )

Disabling

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

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

Control the value

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%",
    )

Submitting a form using slider

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.divider(),
        rx.heading("Results"),
        rx.text(FormSliderState.form_data.to_string()),
        width="100%",
    )

Orientation

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"
)

Styling

classic

surface

soft

Accent

Gray

Disabled

size

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%",
)

high contrast

rx.flex(
    rx.slider(default_value=25),
    rx.slider(default_value=25, high_contrast=True),
    direction="column",
    spacing="4",
    width="100%",
)

radius

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%",
)

API Reference

Slider

Provides user selection from a range of values.

Prop	Type	Description
`as_child`	bool	Change the default rendered element for the one passed as a child, merging their props and behavior.
`size`	Literal	Button size "1" - "3"
`variant`	Literal	Variant of button
`color_scheme`	Literal	Override theme color for button
`high_contrast`	bool	Whether to render the button with higher contrast color against background
`radius`	Literal	Override theme radius for button: "none" \| "small" \| "full"
`default_value`	Union	The value of the slider when initially rendered. Use when you do not need to control the state of the slider.
`value`	List	The controlled value of the slider. Must be used in conjunction with onValueChange.
`name`	str	The name of the slider. Submitted with its owning form as part of a name/value pair.
`min`	Union	The minimum value of the slider.
`max`	Union	The maximum value of the slider.
`step`	Union	The step value of the slider.
`disabled`	bool	Whether the slider is disabled
`orientation`	Literal	The orientation of the slider.

Event Triggers

Trigger	Description
`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.

← Select Switch →

Did you find this useful?

Yes

Raise an issue

Edit this page

Home Gallery Changelog Introduction Hosting