FancyUI
Saved GitHub Get started
Slider — live readout — preview

Slider — live readout

FancyUI FANCYUI

The fill and the readout move as one while you drag.

#minimal#drag

Open docs

Use in FancyUI

Type
Interaction
Interaction
Drag
Style
Minimal
Code availability
Open source

Why it works

The fill is a CSS variable written from the same value as the number, so the bar and the readout can never disagree, even mid-drag.

When to use it

Any numeric setting where the exact value matters.

Things to watch

A native range input underneath, so keyboard and screen readers work out of the box. The tick sound is opt-in and silent until the visitor enables sound.

Implementation clues

  • native range
  • CSS var fill
  • tabular value
  • sound tick