Radio Slider with Fill
Four radios laid out as a slider track. A gradient fill springs out to the chosen stop with a lit edge, and every label it covers turns white. Width comes from :has() and a custom property.
Also known as: radio slider, radio button slider css, radio buttons as slider, level selector css.
HTML
<div class="rad-radio-slider" role="radiogroup" aria-labelledby="rad-radio-slider-label">
<div class="rad-radio-slider-head"><span id="rad-radio-slider-label">Reasoning effort</span><span class="rad-radio-slider-hint" aria-hidden="true">Higher is slower</span></div>
<div class="rad-radio-slider-track">
<span class="rad-radio-slider-fill" aria-hidden="true"></span>
<label><input type="radio" name="rad-radio-slider" value="low"><span>Low</span></label>
<label><input type="radio" name="rad-radio-slider" value="medium" checked><span>Medium</span></label>
<label><input type="radio" name="rad-radio-slider" value="high"><span>High</span></label>
<label><input type="radio" name="rad-radio-slider" value="max"><span>Max</span></label>
</div>
</div>CSS
.rad-radio-slider {
--c: var(--rad-color, #3b82f6);
font-size: var(--rad-size, 18px);
--i: -1;
display: grid;
gap: 0.55em;
width: 20em;
font-family: system-ui, sans-serif;
line-height: 1.2;
}
.rad-radio-slider:has(label:nth-of-type(1) :checked) { --i: 0; }
.rad-radio-slider:has(label:nth-of-type(2) :checked) { --i: 1; }
.rad-radio-slider:has(label:nth-of-type(3) :checked) { --i: 2; }
.rad-radio-slider:has(label:nth-of-type(4) :checked) { --i: 3; }
.rad-radio-slider-head {
display: flex;
justify-content: space-between;
align-items: baseline;
font-size: 0.85em;
font-weight: 600;
}
.rad-radio-slider-hint {
font-size: 0.85em;
font-weight: 500;
color: color-mix(in srgb, currentColor 50%, transparent);
}
.rad-radio-slider-track {
position: relative;
display: grid;
grid-template-columns: repeat(4, 1fr);
height: 2.3em;
overflow: hidden;
border-radius: 0.7em;
background: color-mix(in srgb, currentColor 7%, transparent);
box-shadow: inset 0 0 0 1px color-mix(in srgb, currentColor 8%, transparent);
}
.rad-radio-slider-fill {
position: absolute;
top: 0;
bottom: 0;
left: 0;
width: calc((var(--i) + 1) * 25%);
border-radius: 0.7em;
background: linear-gradient(90deg, color-mix(in srgb, var(--c) 72%, transparent), var(--c));
box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.25), inset -0.14em 0 0 rgb(255 255 255 / 0.55), 0.2em 0 0.6em -0.2em color-mix(in srgb, var(--c) 60%, transparent);
transition: width 0.6s cubic-bezier(0.34, 1.35, 0.5, 1);
}
.rad-radio-slider label {
position: relative;
display: grid;
place-items: center;
cursor: pointer;
}
.rad-radio-slider input {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
margin: 0;
opacity: 0;
cursor: pointer;
z-index: 1;
}
.rad-radio-slider label span {
font-size: 0.8em;
font-weight: 600;
color: color-mix(in srgb, currentColor 55%, transparent);
transition: color 0.3s ease 0.1s;
}
.rad-radio-slider label:hover span {
color: currentColor;
}
.rad-radio-slider label:has(~ label :checked) span {
color: rgb(255 255 255 / 0.85);
}
.rad-radio-slider label:has(:checked) span {
color: #fff;
}
.rad-radio-slider label:active span {
transform: scale(0.94);
}
.rad-radio-slider input:focus-visible + span {
outline: 0.12em solid currentColor;
outline-offset: 0.3em;
border-radius: 0.2em;
}
@media (prefers-reduced-motion: reduce) {
.rad-radio-slider *,
.rad-radio-slider *::before,
.rad-radio-slider *::after {
transition-duration: 0.01ms !important;
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
}
}
@media (prefers-reduced-motion: reduce) {
.rad-radio-slider, .rad-radio-slider *, .rad-radio-slider::before, .rad-radio-slider::after, .rad-radio-slider *::before, .rad-radio-slider *::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
}
}Customizing this snippet
- Color: set
--rad-coloron the element or a parent. Currently previewing#3b82f6. - Size: set
--rad-size. Every other dimension is inem, so the whole thing scales together. Currently previewing18px. - Speed: change the duration on the
transitionoranimationshorthand. Staggered delays are relative, so they keep their rhythm. - Reduced motion: the rule at the end of the CSS turns the motion off for people who asked their OS for less of it. Keep it.