Custom range slider with tooltip

Create a custom range slider with a tooltip showing the selected value. There is no JS to update the values, it's pure CSS with minimal HTML!

<label>
  <input type="range" id="one" min="0" max="120" step="1" value="20">
  <output for="one" style="--min: 0;--max: 120"></output>
</label>

Powered by modern CSS features:

• Scroll Driven animation
• Anchor positioning
• @property & CSS variables

The support for the tooltip feature is still limited (chrome-only for now) but the range slider works fine in all the browsers.

See the Pen CSS-only Custom range slider by Temani Afif (@t_afif) on CodePen.

We can also add some motion to the tooltip to get a fancy effect.

See the Pen CSS-only Custom range slider with motion by Temani Afif (@t_afif) on CodePen.

• Previous CSS Tip
• Next CSS Tip