Slider
A slider for picking a value from a numeric range. When a label is given, the selected value is shown live, with its unit, to the right of the label.
Basic usage
The default range is 0–100. Give the initial value with value; if omitted, min is used. unit is appended to the value. When bound with wire:model or x-model, the value in the label follows the model: when the server changes the value (filling, resetting), the label updates too.
<acun:range name="rate" label="Customer satisfaction target" :value="85" unit="%" />| Prop | Values |
|---|---|
value | Initial value |
unit | Text appended to the value |
Range and step
Set the range and the increment with min, max and step. If you want a space between the value and the unit, put the space at the start of the unit (" km").
<acun:range name="radius" label="Search radius" :min="1" :max="50" :value="10" unit=" km" />
<acun:range name="budget" label="Campaign budget" :min="0" :max="5000" :step="250" :value="1500" unit=" ₺" />| Prop | Values |
|---|---|
min | 0 |
max | 100 |
step | 1 |
Without a label
If label is not given, the value is not shown either. In that case, add aria-label to tell screen readers what the field is; the attribute is passed directly to the slider.
<acun:range name="volume" :value="40" aria-label="Notification volume" />| Prop | Values |
|---|---|
aria-label | Invisible accessible name |
With Livewire
Bind it with wire:model; the value in the label follows the model and also updates when the server changes the value. So that it also looks right when the page first loads, give the same value as value too.
<acun:range wire:model.live="radius" label="Search radius" :min="1" :max="50" :value="$radius" unit=" km" />| Prop | Values |
|---|---|
wire:model | The bound Livewire property |
Props and slots
The values the component accepts.
| Prop | Default | Description |
|---|---|---|
label | null | Label; if given, the value is shown next to it |
min | 0 | Minimum value |
max | 100 | Maximum value |
step | 1 | Increment |
value | null | Initial value; min when empty |
unit | '' | Unit appended to the value ("%", " km") |