Transform the native range slider into a star rating component using a few lines of CSS and zero JavaScript. You can adjust the number of stars by sim

A single-element star rating component (without JS)

submited by

Style Pass

2025-01-24 11:30:03

Transform the native range slider into a star rating component using a few lines of CSS and zero JavaScript. You can adjust the number of stars by simply changing the max attribute.

<input type="range" min="1" max="5"> input[type="range"] {
--s: 100px; /* control the size */

height: var(--s);
aspect-ratio: calc(attr(max type(<integer>)) - 1);
padding-inline: calc(var(--s)/2);
mask: 0 calc(.4*var(--s))/var(--s);
mask-image:
conic-gradient(from 162deg at 50% 65%,#000 .1turn,#0000 0),
conic-gradient(from 18deg at 21% 55%,#000 .1turn,#0000 0),
conic-gradient(from 306deg at 79% 55%,#000 .1turn,#0000 0);
appearance: none;
cursor: pointer;
}
input[type="range" i]::-webkit-slider-thumb{
width: 1px;
border-image:
conic-gradient(at calc(50% + var(--s)/2),#7b7b7b 50%,#fff220 0)
fill 0//var(--s) calc(20*var(--s));
appearance: none;
} See the Pen CSS-Only Rating Component (Click to update!) by Temani Afif (@t_afif) on CodePen. More CSS Tips A wiggly box (wavy borders) using CSS Mask Smoothly stop an infinite rotation Running animations without keyframes Created by Temani Afif (Support Me) | CSS Generators | CSS Loaders | CSS Shape | CSS Pattern