# Slider

Published: November 25, 2025

Version: ^2.8.0

<img loading="lazy" class="rounded-2xl border dark:border-zinc-700" src="/img/blog/2_8_0_slider_hero.png" alt="Slider component with thumb on a horizontal track" />

Whether you're building a price filter, adjusting settings, or selecting a range of values, sliders are a natural fit for countless interfaces. Flux now ships with a fully-featured **Slider** component.

Let's take a look.

```blade
<flux:slider wire:model="employees" />
```

## Range selection

<img loading="lazy" class="rounded-2xl border dark:border-zinc-700" src="/img/blog/2_8_0_slider_range.png" alt="Range slider with two thumbs selecting a range of values" />

Need to select a range instead of a single value? Add the `range` prop and you get two thumbs—perfect for price ranges, date ranges, or any min/max filtering.

```blade
<flux:slider range wire:model="budget" />
```

Bind to an array in your Livewire component and both values update in real-time:

```php
public array $range = [200, 800];
```

## Fine-tuned control

Configure the slider exactly how you need it with `min`, `max`, `step`, and `min-steps-between`:

```blade
<flux:slider
    range
    min="0"
    max="1000"
    step="10"
    min-steps-between="10"
/>
```

The `min-steps-between` prop ensures your range thumbs maintain a minimum distance—so if your step is `10` and min-steps-between is `10`, the thumbs will always be at least 100 units apart.

## Visual markers

<img loading="lazy" class="rounded-2xl border dark:border-zinc-700" src="/img/blog/2_8_0_ticks.png" alt="Slider with visual tick marks on the bottom" />

Add ticks below the slider to help users visualize steps and values. Show simple marks, numbers, or custom labels:

```blade
<!-- Simple tick marks -->
<flux:slider min="1" max="5">
    @foreach (range(1, 5) as $i)
        <flux:slider.tick :value="$i" />
    @endforeach
</flux:slider>

<!-- With numbers -->
<flux:slider min="1" max="5">
    @foreach (range(1, 5) as $i)
        <flux:slider.tick :value="$i">{{ $i }}</flux:slider.tick>
    @endforeach
</flux:slider>

<!-- Custom labels -->
<flux:slider min="1" max="5">
    <flux:slider.tick value="1">Low</flux:slider.tick>
    <flux:slider.tick value="3">Mid</flux:slider.tick>
    <flux:slider.tick value="5">High</flux:slider.tick>
</flux:slider>
```

## Custom styling

<img loading="lazy" class="rounded-2xl border dark:border-zinc-700" src="/img/blog/2_8_0_slider_custom.png" alt="Custom styled slider with larger track and thumb" />

Make it your own with `track:class` and `thumb:class`. Want a chunkier slider? No problem:

```blade
<flux:slider track:class="h-3 bg-blue-600" thumb:class="size-5" />
```

These props give you complete control over the appearance while keeping all the functionality intact.

## The details that matter

We really sweat the details on this one and hope it shows.

**Offset mouse tracking**: When you click to drag a thumb, it doesn't snap the center of the thumb to your cursor—making precise adjustments feel natural and accurate, especially when moving just a step or two.

**Intelligent thumb behavior**: In range mode, the thumbs can't cross over each other and invert the range. The right thumb always stays on top when they're close together, preventing any confusion about which is which.

**Big steps**: Hold <kbd>Shift</kbd> while pressing arrow keys to jump by larger increments using the `big-step` prop—great for quickly covering large ranges.

## Accessibility

And of course, we went to great lengths to make sure this component honors expected keyboard navigation, proper focus indicators, and appropriate ARIA labels so that screen readers can use it just as well. Arrow keys adjust values, and you can tab between thumbs in a range slider.

---

Check out the [Slider documentation](https://fluxui.dev/components/slider) for more examples and the full API reference.