Phara UI v2.x
Login

Slider

An accessible range input with a custom styled track, fill, and thumb. Supports sizes, colors, and Livewire binding.

Basic

A simple slider with a label and value display. The current value is shown on the right and updates as you drag.

0 100
Blade 
<x-ui::slider label="Volume" value="40" />
Sizes

Three track and thumb sizes to fit different UI contexts.

0 100
0 100
0 100
Blade 
<x-ui::slider label="Small"  size="sm" value="30" />
<x-ui::slider label="Medium" size="md" value="55" />
<x-ui::slider label="Large"  size="lg" value="75" />
Colors

Use the color prop to change the fill and thumb accent color.

0 100
0 100
0 100
0 100
0 100
Blade 
<x-ui::slider color="primary" label="Primary" value="60" />
<x-ui::slider color="green"   label="Green"   value="45" />
<x-ui::slider color="red"     label="Red"     value="70" />
<x-ui::slider color="yellow"  label="Yellow"  value="35" />
<x-ui::slider color="sky"     label="Sky"     value="55" />
Livewire

Bind the slider to a Livewire property using wire:model.live. The server-side value updates in real time as you drag.

0 100

Server value: 40

0 100

Server value: 70

0 100

Server value: 55

PHP 
// Livewire component
public int $volume = 40;

// Template
<x-ui::slider
    label="Volume"
    wire:model.live="volume"
    :min="0"
    :max="100"
/>

<p>Current value: {{ $volume }}</p>
Disabled

Add the disabled attribute to prevent interaction. The slider renders at reduced opacity.

0 100
Blade 
<x-ui::slider label="Disabled" value="60" disabled />

Slider Tick

A stepped slider that renders a tick mark and optional label at every stop. Active ticks are colored, inactive ones are gray.

Basic

Set step to control the number of stops. Boundary ticks are slightly taller than intermediate ones.

Blade 
<x-ui::slider-tick label="Progress" value="50" :step="25" />
Steps

Adjust step, min, and max to define the stops. Keep the tick count manageable — aim for 5–11 stops.

Blade 
{{-- 5 stops: 0, 25, 50, 75, 100 --}}
<x-ui::slider-tick label="Quarter steps" value="50"  :step="25" />

{{-- 11 stops: 0, 10, 20 ... 100 --}}
<x-ui::slider-tick label="Decade steps" value="40"  :step="10" />

{{-- Rating 1–5 --}}
<x-ui::slider-tick label="Rating" :min="1" :max="5" :step="1" value="3" color="yellow" />
Colors

The color prop colors the fill, thumb, and active tick marks together.

Blade 
<x-ui::slider-tick color="primary" label="Primary" value="50"  :step="25" />
<x-ui::slider-tick color="green"   label="Green"   value="25"  :step="25" />
<x-ui::slider-tick color="red"     label="Red"     value="75"  :step="25" />
<x-ui::slider-tick color="yellow"  label="Yellow"  value="50"  :step="25" />
<x-ui::slider-tick color="sky"     label="Sky"     value="100" :step="25" />
Livewire

Works the same as the regular slider — bind with wire:model.live and the server value updates on every step.

Server value: 40

PHP 
// Livewire component
public int $volume = 40;

// Template
<x-ui::slider-tick
    label="Volume"
    wire:model.live="volume"
    :min="0"
    :max="100"
    :step="20"
/>

<p>Server value: {{ $volume }}</p>
No Labels

Set :showLabels="false" to render tick marks only, without the value labels below.

Blade 
<x-ui::slider-tick label="Compact" value="50" :step="25" :showLabels="false" />