✨ Announcing our seed funding led by Lux Capital! Read more about it on our blog ✨
[ Learn ]
[ Concepts ]
[ Reference ]
Slider
The Slider is used to allow users to make selections from a range of values.
50
class SliderVariation(rx.State):
value: int = 50
def set_end(self, value: int):
self.value = value
def index():
return rx.vstack(
rx.heading(SliderVariation.value),
rx.slider(on_change_end=SliderVariation.set_end),
width="100%",
)You can also combine all three event handlers
on_change, on_change_start, and on_change_end together.50
class SliderCombo(rx.State):
value: int = 50
color: str = "black"
def set_start(self, value: int):
self.color = "#68D391"
def set_end(self, value: int):
self.color = "#F56565"
def index():
return rx.vstack(
rx.heading(
SliderCombo.value, color=SliderCombo.color
),
rx.slider(
on_change_start=SliderCombo.set_start,
on_change=SliderCombo.set_value,
on_change_end=SliderCombo.set_end,
),
width="100%",
)You can also customize the appearance of the slider by passing in custom components for the track and thumb.
Weather is 50 degrees
class SliderManual(rx.State):
value: int = 50
def set_end(self, value: int):
self.value = value
def index():
return rx.vstack(
rx.heading(
f"Weather is {SliderManual.value} degrees"
),
rx.slider(
rx.slider_track(
rx.slider_filled_track(bg="tomato"),
bg="red.100",
),
rx.slider_thumb(
rx.icon(tag="sun", color="white"),
box_size="1.5em",
bg="tomato",
),
on_change_end=SliderManual.set_end,
),
width="100%",
)If you want to trigger state change on every slider movement, you can use the
on_change event handler.For performance reasons, you may want to trigger state change only when the user releases the slider by using the
on_change_endevent handler, but if you need perform an event on every slider movement, you can use the on_change event handler.50
class SliderState(rx.State):
value: int = 50
def index():
return rx.vstack(
rx.heading(SliderState.value),
rx.slider(on_change=SliderState.set_value),
width="100%",
)Slider
The wrapper that provides context and functionality for all children.
SliderTrack
The empty part of the slider that shows the track.
No props for SliderTrack.
Base Event Triggers
SliderFilledTrack
The filled part of the slider.
No props for SliderFilledTrack.
Base Event Triggers
SliderThumb
The handle that's used to change the slider value.
Base Event Triggers
SliderMark
The label or mark that shows names for specific slider values.
No props for SliderMark.
Base Event Triggers
Copyright © 2023 Pynecone, Inc.