# Dot ticks for sliders

Published: August 8, 2026

Version: ^2.16.0

<img loading="lazy" class="rounded-2xl border dark:border-zinc-700" src="/img/blog/2_16_0_slider_dot_ticks.png" alt="Slider with five dot ticks positioned inside a thick dark gray and light gray track" />

Flux sliders can now display dot ticks directly inside the track. They're handy for compact settings, ratings, and other controls with a small set of meaningful steps.

```blade
<flux:slider tick:position="inside" min="1" max="5">
    @foreach (range(1, 5) as $i)
        <flux:slider.tick :value="$i" variant="dot" />
    @endforeach
</flux:slider>
```

The two new options are intentionally independent: `tick:position="inside"` controls where the slider renders its ticks, while `variant="dot"` controls how each tick looks.

That means you can mix and match them. Dot ticks can sit below the track, and regular line ticks can sit inside it. Custom tick labels continue to work below the slider as before.

Dots also inherit the slider's active state, so marks over the filled portion of the track automatically adjust their contrast as the value changes.

---

[Check out the slider docs →](https://fluxui.dev/components/slider)