101 lines
2.5 KiB
Markdown
101 lines
2.5 KiB
Markdown
---
|
|
components:
|
|
- rx.chakra.Slider
|
|
- rx.chakra.SliderTrack
|
|
- rx.chakra.SliderFilledTrack
|
|
- rx.chakra.SliderThumb
|
|
- rx.chakra.SliderMark
|
|
---
|
|
|
|
```python exec
|
|
import reflex as rx
|
|
```
|
|
|
|
# Slider
|
|
|
|
The Slider is used to allow users to make selections from a range of values.
|
|
|
|
```python demo exec
|
|
class SliderState(rx.State):
|
|
value: int = 50
|
|
|
|
|
|
def slider_example():
|
|
return rx.chakra.vstack(
|
|
rx.chakra.heading(SliderState.value),
|
|
rx.chakra.slider(
|
|
on_change=SliderState.set_value
|
|
),
|
|
width="100%",
|
|
)
|
|
```
|
|
|
|
You can also combine all three event handlers: `on_change`, `on_change_start`, and `on_change_end`.
|
|
|
|
```python demo exec
|
|
class SliderCombo(rx.State):
|
|
value: int = 50
|
|
color: str = "black"
|
|
|
|
def set_start(self, value):
|
|
self.color = "#68D391"
|
|
|
|
def set_end(self, value):
|
|
self.color = "#F56565"
|
|
|
|
|
|
def slider_combo_example():
|
|
return rx.chakra.vstack(
|
|
rx.chakra.heading(SliderCombo.value, color=SliderCombo.color),
|
|
rx.chakra.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.
|
|
|
|
```python demo exec
|
|
class SliderManual(rx.State):
|
|
value: int = 50
|
|
|
|
def set_end(self, value: int):
|
|
self.value = value
|
|
|
|
|
|
def slider_manual_example():
|
|
return rx.chakra.vstack(
|
|
rx.chakra.heading(f"Weather is {SliderManual.value} degrees"),
|
|
rx.chakra.slider(
|
|
rx.chakra.slider_track(
|
|
rx.chakra.slider_filled_track(bg="tomato"),
|
|
bg='red.100'
|
|
),
|
|
rx.chakra.slider_thumb(
|
|
rx.chakra.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_end` event handler, but if you need perform an event on every slider movement, you can use the `on_change` event handler.
|
|
|
|
```python demo
|
|
rx.chakra.vstack(
|
|
rx.chakra.heading(SliderState.value),
|
|
rx.chakra.slider(
|
|
on_change=SliderState.set_value
|
|
),
|
|
width="100%",
|
|
)
|
|
```
|