> For AI agents: the complete documentation index is at [llms.txt](https://reflex.dev/docs/llms.txt). Markdown versions are available by appending `.md` or sending `Accept: text/markdown`.

---
components:
  - rx.slider

Slider: |
  lambda **props: rx.center(rx.slider(default_value=40, height="100%", **props), height="4em", width="100%")
---

```python exec
import reflex as rx
```

# Slider

Provides user selection from a range of values. The

## Basic Example

The slider can be controlled by a single value or a range of values. Slider can be hooked to state to control its value. Passing a list of two values creates a range slider.

```python demo exec
class SliderState(rx.State):
    value: int = 50

    @rx.event
    def set_end(self, value: list[int | float]):
        self.value = value[0]


def slider_intro():
    return rx.vstack(
        rx.heading(SliderState.value),
        rx.slider(on_value_commit=SliderState.set_end),
        width="100%",
    )
```

## Range Slider

Range slider is created by passing a list of two values to the `default_value` prop. The list should contain two values that are in the range of the slider.

```python demo exec
class RangeSliderState(rx.State):
    value_start: int = 25
    value_end: int = 75

    @rx.event
    def set_end(self, value: list[int | float]):
        self.value_start = value[0]
        self.value_end = value[1]


def range_slider_intro():
    return rx.vstack(
        rx.hstack(
            rx.heading(RangeSliderState.value_start),
            rx.heading(RangeSliderState.value_end),
        ),
        rx.slider(
            default_value=[25, 75],
            min_=0,
            max=100,
            size="1",
            on_value_commit=RangeSliderState.set_end,
        ),
        width="100%",
    )
```

## Live Updating Slider

You can use the `on_change` prop to update the slider value as you interact with it. The `on_change` prop takes a function that will be called with the new value of the slider.

Here we use the `throttle` method to limit the rate at which the function is called, which is useful to prevent excessive updates. In this example, the slider value is updated every 100ms.

```python demo exec
class LiveSliderState(rx.State):
    value: int = 50

    @rx.event
    def set_end(self, value: list[int | float]):
        self.value = value[0]


def live_slider_intro():
    return rx.vstack(
        rx.heading(LiveSliderState.value),
        rx.slider(
            default_value=50,
            min_=0,
            max=100,
            on_change=LiveSliderState.set_end.throttle(100),
        ),
        width="100%",
    )
```

## Slider in forms

Here we show how to use a slider in a form. We use the `name` prop to identify the slider in the form data. The form data is then passed to the `handle_submit` method to be processed.

```python demo exec
class FormSliderState(rx.State):
    form_data: dict = {}

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


def slider_form_example():
    return rx.card(
        rx.vstack(
            rx.heading("Example Form"),
            rx.form.root(
                rx.hstack(
                    rx.slider(default_value=40, name="slider"),
                    rx.button("Submit", type="submit"),
                    width="100%",
                ),
                on_submit=FormSliderState.handle_submit,
                reset_on_submit=True,
            ),
            rx.divider(),
            rx.hstack(
                rx.heading("Results:"),
                rx.badge(FormSliderState.form_data.to_string()),
            ),
            align_items="left",
            width="100%",
        ),
        width="50%",
    )
```

## API Reference

### rx.slider

Provides user selection from a range of values.

#### Props

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `as_child` | bool | - | Change the default rendered element for the one passed as a child, merging their props and behavior. |
| `size` | Literal["1", "2", "3"], Breakpoints[str, Literal["1", "2", "3"]] | - | Button size "1" - "3". |
| `variant` | Literal["classic", "surface", "soft"] | - | Variant of button. |
| `color_scheme` | Literal["tomato", "red", "ruby", "crimson", "pink", "plum", "purple", "violet", "iris", "indigo", "blue", "cyan", "teal", "jade", "green", "grass", "brown", "orange", "sky", "mint", "lime", "yellow", "amber", "gold", "bronze", "gray"] | - | Override theme color for button. |
| `high_contrast` | bool | - | Whether to render the button with higher contrast color against background. |
| `radius` | Literal["none", "small", "full"] | - | Override theme radius for button: "none", "small", "full". |
| `default_value` | Sequence[float, int], float, int | - | The value of the slider when initially rendered. Use when you do not need to control the state of the slider. |
| `value` | Sequence[float, int] | - | 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. |
| `width` | str, NoneType | - | The width of the slider. |
| `min` | float, int | - | The minimum value of the slider. |
| `max` | float, int | - | The maximum value of the slider. |
| `step` | float, int | - | The step value of the slider. |
| `disabled` | bool | - | Whether the slider is disabled. |
| `orientation` | Literal["vertical", "horizontal"] | - | The orientation of the slider. |

#### Event Triggers

Base event triggers: https://reflex.dev/docs/api-reference/event-triggers/

Component-specific event triggers:

| Event Trigger | Description |
| --- | --- |
| `on_change` | Fired when the value of the slider changes. |
| `on_value_commit` | Fired when a thumb is released after being dragged. |