Slider
StorybookA draggable range input for selecting a numeric value. Demonstrated in all 3 state modes plus step, vertical, and disabled variants.
Client-only Slider
No server events. Vanilla JS buttons update the slider via CustomEvent — zero latency. Drag or use keyboard (arrow keys, Home/End, Page Up/Down).
Range Slider
Use a list with two values for a range slider. The filled area spans between the thumbs. Each thumb is independently draggable and keyboard-accessible.
Multiple Thumbs
Use a list with multiple values for multiple thumbs. The filled area spans from the minimum to the maximum thumb.
Step + Custom Range
step=10 snaps to multiples of 10. The second slider uses min=0 max=200.
Vertical
orientation="vertical" with an explicit height class. Two sliders side-by-side, matching the shadcn showcase.
Disabled
disabled prevents interaction and applies opacity-50.
Hybrid
JS updates instantly for responsiveness, then pushes the event to the server. The event log below updates via LiveView.
Server-controlled
The server owns the state. Use the buttons below to control the slider externally.
33
Push Event (Server → Client)
The server pushes commands to a client-mode slider via push_event/3. The slider has no value or on_value_change — it's client-only, but the server can still command it.