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 rx.chakra.vstack(
        rx.chakra.heading(
            f"{RangeSliderState.value[0]} : {RangeSliderState.value[1]}"
        ),
        rx.chakra.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

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

API Reference

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	Default Value	Values
`value`	List
`default_value`	List
`direction`	Literal
`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