✨ Announcing our seed funding led by Lux Capital! Read more about it on our blog ✨
[ Learn ]
[ Concepts ]
[ Reference ]
RangeSlider
The range slider is used to allow users to make selections from a range of values.
0 : 100
from typing import List
class RangeSliderVariation(rx.State):
value: List[int] = [0, 100]
def set_end(self, value: List[int]):
self.value = value
def index():
return rx.vstack(
rx.heading(
f"{RangeSliderVariation.value[0]} : {RangeSliderVariation.value[1]}"
),
rx.range_slider(
on_change_end=RangeSliderVariation.set_end
),
width="100%",
)Between 0 and 100
from typing import List
class RangeSliderManual(rx.State):
value: List[int] = [0, 100]
def index():
return rx.vstack(
rx.heading(
f"Between {RangeSliderManual.value[0]} and {RangeSliderManual.value[1]}"
),
rx.range_slider(
rx.range_slider_track(
rx.range_slider_filled_track(bg="#48BB78"),
bg="#C6F6D5",
),
rx.range_slider_thumb(
rx.icon(tag="arrow_left", color="white"),
bg="#48BB78",
box_size="2em",
index=0,
),
rx.range_slider_thumb(
rx.icon(tag="arrow_right", color="white"),
bg="#48BB78",
box_size="2em",
index=1,
),
on_change_end=RangeSliderManual.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
from typing import List
class RangeSliderState(rx.State):
value: List[int] = [0, 100]
def index():
return rx.vstack(
rx.heading(
f"{RangeSliderState.value[0]} : {RangeSliderState.value[1]}"
),
rx.range_slider(
on_change=RangeSliderState.set_value
),
width="100%",
)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.
RangeSliderTrack
A range slider track.
No props for RangeSliderTrack.
Base Event Triggers
RangeSliderFilledTrack
A filled range slider track.
No props for RangeSliderFilledTrack.
Base Event Triggers
RangeSliderThumb
A range slider thumb.
Base Event Triggers
Copyright © 2023 Pynecone, Inc.