RangeSlider

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

0 : 100

from typing import List


class RangeSliderState(rx.State):
    value: List[int] = [0, 100]


def range_slider_example():
    return rc.vstack(
        rc.heading(
            f"{RangeSliderState.value[0]} : {RangeSliderState.value[1]}"
        ),
        rc.range_slider(
            on_change_end=RangeSliderState.set_value
        ),
        width="100%",
    )

If you want to trigger state change on every slider movement, you can use the on_change event handler. This is not recommended for performance reasons and should only be used if you need to perform an event on every slider movement.

0 : 100

rc.vstack(
    rc.heading(
        f"{RangeSliderState.value[0]} : {RangeSliderState.value[1]}"
    ),
    rc.range_slider(on_change=RangeSliderState.set_value),
    width="100%",
)

rc.RangeSlider

The RangeSlider is a multi thumb slider used to select a range of related values. A common use-case of this component is a price range picker that allows a user to set the minimum and maximum price.

Prop	Type \| Values	Default
`value`	`List`
`default_value`	`List`
`direction`	`"ltr" \| "rtl"`
`focus_thumb_on_change`	`bool`
`is_disabled`	`bool`
`is_read_only`	`bool`
`is_reversed`	`bool`
`min_`	`int`
`max_`	`int`
`min_steps_between_thumbs`	`int`
`name`	`str`