Slider
A single-thumb slider (the WAI-ARIA pattern) with its value mirrored into a hidden input.
Installation
Shadwire follows shadcn/ui's open code model: the component's source is copied into your application and becomes yours. Install it with the CLI:
The slider registry item installs these files:
-
app/components/ui_component.rb -
app/components/ui/slider_component.rb -
app/helpers/ui/slider_helper.rb -
app/javascript/controllers/ui_slider_controller.js -
vendor/shadwire/shadwire.css
This component uses Stimulus, so the application needs importmap-rails and stimulus-rails with automatic controller loading.
Haven't installed the CLI yet? gem install shadwire, then shadwire init.
Usage
Examples
Default
Drag the thumb or use the arrow keys.
API reference
Every part accepts class / class_name and **attrs.
| Component | Argument | Default | Description |
|---|---|---|---|
Slider |
min |
0 |
The lowest value. |
Slider |
max |
100 |
The highest value. |
Slider |
step |
1 |
How far the arrow keys and a drag move the value. |
Slider |
value |
0 |
The starting value. |
Slider |
name |
nil |
The name of the hidden input that submits the value; no input without it. |
Slider |
label |
nil |
The thumb's accessible name (aria-label). |
Slider |
disabled |
false |
Disables it: not clickable, and skipped by the keyboard. |