CSS Tip

A single-element volume control component

Similar to the star rating component, I am creating a volume control component using the native range slider and zero JavaScript. No extra element is used and you can control the number of bars by simply adjusting the max attribute.

CSS-only volume control component

<input type="range" min="1" max="5">
input[type=range] {
  --s: 50px; /* the size of the bar (including the gap) */
  --g: 30%;  /* the gap (percentage of the above size) */
  
  --_n: attr(max type(<integer>)); /* update max to control the number of bars */
  aspect-ratio: 3/2; /* you can update this as well */
  width: calc(var(--_n)*var(--s));
  padding-inline: calc(var(--s)/2);
  box-sizing: border-box;
  mask: 
    linear-gradient(90deg,#0000 calc(var(--g)/2),#000 0 calc(100% - var(--g)/2),#0000 0) 
     0/var(--s) intersect,
    linear-gradient(to top left,#000 50%,#0000 0),
    linear-gradient(to top left,#000 calc(50% + 50%/var(--_n)),#0000 0) intersect,
    repeating-conic-gradient(#000 0 25%,#0000 0 50%)
     0 100%/calc(200%/var(--_n)) calc(200%/var(--_n));
  appearance: none;
}
input[type="range" i]::-webkit-slider-thumb{
  width: 1px;
  border-image: 
    conic-gradient(at calc(50% + var(--s)/2),#D9CEB2 50%,#3FB8AF 0)
    fill 0//400px calc(var(--_n)*var(--s));
  appearance: none;
}

See the Pen CSS-only volume control (click to update!) by Temani Afif (@t_afif) on CodePen.

More CSS Tips