CSS Tip

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!

CSS-only range slider with tooltip

<label>
   your 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:

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.

More detail: frontendmasters.com/blog/custom-range-slider-using-anchor-positioning-scroll-driven-animations

More CSS Tips