Slider
A value or a range on a track: linear or listed steps, marks, a histogram and synced number fields.
Basic Usage
A value on a linear scale. The bubble shows the value while the thumb is hovered, dragged or focused; the arrow keys, Page Up / Down, Home and End move it, and a press on the rail jumps there.
250
<neura::slider wire:model.live="budget" label="Daily budget" :max="1000" :step="10"
suffix=" €" :marks="[0, 250, 500, 750, 1000]" input />Range
range adds a second thumb and the value becomes [from, to]. min-gap keeps the thumbs apart; a histogram draws bars behind the track, coloured inside the selection.
[25,44]
<neura::slider wire:model.live="ages" range label="Audience age"
:min="18" :max="65" :min-gap="1" suffix=" yrs" :histogram="$audience" />Listed Steps
steps gives the allowed values. They share the track evenly whatever their gaps, so 0.10 € and 5 € each get the same room; the value is the listed number, not its position.
1
<neura::slider wire:model.live="bid" label="Max bid per click"
:steps="[0.1, 0.25, 0.5, 1, 2, 5]" :marks="true" suffix=" €" bubble="always" />Sizes and Colours
Size, corners and colour come from the config and can be set per slider.
rounded shapes the rail and the thumbs.
<neura::slider size="sm" color="emerald" />
<neura::slider color="amber" rounded="sm" />
<neura::slider size="lg" color="rose" />Configuration
Defaults live in
config/neura-kit.php, like the other components. A prop on the tag wins over them.
'slider' => Config::slider([
'default' => [
'size' => 'md', // sm | md | lg (pack: Slider\Size)
'rounded' => 'full', // rail and thumbs
'color' => 'primary',
],
]),
'slider' => Config::slider([
'default' => [
'size' => 'md', // sm | md | lg (pack: Slider\Size)
'rounded' => 'full', // rail and thumbs
'color' => 'primary',
],
]),Props
| Prop | Type | Default | Description |
|---|---|---|---|
| value / wire:model | number|array | min | A number, or [from, to] with range |
| min / max / step | number | 0 / 100 / 1 | The linear scale |
| steps | array | null | Allowed values, spaced evenly (replaces min, max and step) |
| range | boolean | false | Two thumbs |
| minGap | number | 0 | Least distance between the thumbs (in listed values with steps) |
| marks | true|array | null | true: a tick per step; a list of values; or value => label |
| bubble | active|always|none | active | The value over the thumb |
| input | boolean | false | Synced number fields in the header |
| label / description | string | null | Text above and below |
| showValue | boolean | true | The value beside the label |
| prefix / suffix / decimals | string / int | '' / step's | How the value is written; digits follow the locale |
| histogram | array | null | Bars drawn behind the track |
| live | boolean | false | Write the value on every move, not on release |
| name | string | null | Hidden inputs for plain form posts |
| size / rounded / color | string | config | From config(neura-kit.slider) |
| disabled | boolean | false |