Reflex Logo

Intro

Gallery

Hosting

Learn

Components

Recipes

API Reference

Onboarding
Hosting

Library

/

Chakra

/

Forms

/

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

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.

PropTypeDescriptionValues
valueList

State var to bind the input.

default_valueList

The default values.

directionLiteral

The writing mode ("ltr" | "rtl")

focus_thumb_on_changebool

If false, the slider handle will not capture focus when value changes.

is_disabledbool

If true, the slider will be disabled

is_read_onlybool

If true, the slider will be in read-only state.

is_reversedbool

If true, the value will be incremented or decremented in reverse.

min_int

The minimum value of the slider.

max_int

The maximum value of the slider.

min_steps_between_thumbsint

The minimum distance between slider thumbs. Useful for preventing the thumbs from being too close together.

namestr

The name of the form field

Event Triggers

TriggerDescription
on_change

Fired when the value changes.

on_change_start

Fired when the value starts changing.

on_change_end

Fired when the value stops changing.

A range slider track.

Props

No component specific props

A filled range slider track.

Props

No component specific props

A range slider thumb.

PropTypeDescriptionValues
indexint

The position of the thumb.

Did you find this useful?

HomeGalleryChangelogIntroductionHosting