Invert
React + Tailwind
import { useState } from 'react';
const css = `
.slider-invert {
position: relative;
width: 240px;
height: 48px;
border-radius: 14px;
overflow: hidden;
background: light-dark(#ebedf0, #232529);
transition: transform 0.3s cubic-bezier(0.3, 1.5, 0.5, 1);
}
.slider-invert:has(.slider-invert__input:active) { transform: scale(0.97); }
.slider-invert:has(.slider-invert__input:focus-visible) { outline: 2px solid light-dark(#50535b, #c6c8cd); outline-offset: 3px; }
.slider-invert__row {
position: absolute;
inset: 0;
display: flex;
align-items: center;
justify-content: space-between;
padding: 0 16px;
font-size: 14px;
font-weight: 500;
color: light-dark(#42454c, #e5e6e9);
}
.slider-invert__row b { font-weight: 500; font-variant-numeric: tabular-nums; }
.slider-invert__label { display: flex; align-items: center; gap: 8px; }
.slider-invert__fill {
position: absolute;
inset: 0;
background: light-dark(#42454c, #e5e6e9);
clip-path: inset(0 calc(100% - var(--slider-invert-w)) 0 0 round 0 6px 6px 0);
transition: clip-path 0.12s ease-out;
}
.slider-invert__fill .slider-invert__row { color: light-dark(#f3f4f7, #1a1c1f); }
.slider-invert__icon { width: 18px; height: 18px; overflow: visible; }
.slider-invert__icon path { transition: opacity 0.2s, transform 0.3s cubic-bezier(0.3, 1.6, 0.5, 1); transform-box: fill-box; transform-origin: 0 50%; }
.slider-invert__icon .slider-invert__off { opacity: 0; transform: scale(0.4); }
.slider-invert__input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; -webkit-appearance: none; appearance: none; background: none; }
.slider-invert__input::-webkit-slider-thumb { -webkit-appearance: none; width: 2px; height: 48px; }
.slider-invert__input::-moz-range-thumb { width: 2px; height: 48px; border: 0; }
@media (prefers-reduced-motion: reduce) {
.slider-invert, .slider-invert__fill, .slider-invert__icon path { transition: none; }
}
`;
function Speaker({ v }: { v: number }) {
const off = (hidden: boolean) => (hidden ? 'slider-invert__off' : undefined);
return (
<svg className="slider-invert__icon" viewBox="0 0 18 18" aria-hidden="true">
<path d="M2.5 6.5h2.8L9.5 3v12l-4.2-3.5H2.5z" fill="currentColor" stroke="currentColor" strokeWidth="1" strokeLinejoin="round" />
{/* Waves come in as the level rises; at zero they give way to a cross. */}
<path className={off(v === 0)} d="M12.2 6.6a3.2 3.2 0 0 1 0 4.8" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" />
<path className={off(v < 50)} d="M14.2 4.4a6.2 6.2 0 0 1 0 9.2" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" />
<path className={off(v > 0)} d="M12.5 7l3.8 4M16.3 7l-3.8 4" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" />
</svg>
);
}
export function InvertSlider() {
const [v, setV] = useState(64);
const row = (
<div className="slider-invert__row" aria-hidden="true">
<span className="slider-invert__label">
<Speaker v={v} />
Volume
</span>
<b>{v}%</b>
</div>
);
return (
<>
<style>
{css}
</style>
<div className="slider-invert" style={{ '--slider-invert-w': `calc(1px + ${v / 100} * (100% - 2px))` } as React.CSSProperties}>
{row}
{/* The same row again on the fill, in the inverse colour; the clip shows it only where the fill covers. */}
<div className="slider-invert__fill">
{row}
</div>
<input
className="slider-invert__input"
type="range"
min={0}
max={100}
value={v}
onChange={(e) => setV(+e.target.value)}
aria-label="Volume"
aria-valuetext={`${v}%`}
/>
</div>
</>
);
}Markup where the component goes, CSS in your stylesheet, script before </body>. In Vue, Svelte or Angular, call initSliderInvert(el) on the mounted element instead.
HTML
<div class="slider-invert" style="--slider-invert-w:calc(1px + 0.64 * (100% - 2px))">
<div class="slider-invert__row" aria-hidden="true">
<span class="slider-invert__label">
<svg class="slider-invert__icon" viewBox="0 0 18 18" aria-hidden="true">
<path d="M2.5 6.5h2.8L9.5 3v12l-4.2-3.5H2.5z" fill="currentColor" stroke="currentColor" stroke-width="1" stroke-linejoin="round"></path>
<path d="M12.2 6.6a3.2 3.2 0 0 1 0 4.8" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round"></path>
<path d="M14.2 4.4a6.2 6.2 0 0 1 0 9.2" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round"></path>
<path class="slider-invert__off" d="M12.5 7l3.8 4M16.3 7l-3.8 4" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round"></path>
</svg>
Volume
</span>
<b>64%</b>
</div>
<div class="slider-invert__fill">
<div class="slider-invert__row" aria-hidden="true">
<span class="slider-invert__label">
<svg class="slider-invert__icon" viewBox="0 0 18 18" aria-hidden="true">
<path d="M2.5 6.5h2.8L9.5 3v12l-4.2-3.5H2.5z" fill="currentColor" stroke="currentColor" stroke-width="1" stroke-linejoin="round"></path>
<path d="M12.2 6.6a3.2 3.2 0 0 1 0 4.8" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round"></path>
<path d="M14.2 4.4a6.2 6.2 0 0 1 0 9.2" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round"></path>
<path class="slider-invert__off" d="M12.5 7l3.8 4M16.3 7l-3.8 4" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round"></path>
</svg>
Volume
</span>
<b>64%</b>
</div>
</div>
<input class="slider-invert__input" type="range" min="0" max="100" aria-label="Volume" aria-valuetext="64%" value="64"/>
</div>CSS
.slider-invert {
position: relative;
width: 240px;
height: 48px;
border-radius: 14px;
overflow: hidden;
background: light-dark(#ebedf0, #232529);
transition: transform 0.3s cubic-bezier(0.3, 1.5, 0.5, 1);
}
.slider-invert:has(.slider-invert__input:active) { transform: scale(0.97); }
.slider-invert:has(.slider-invert__input:focus-visible) { outline: 2px solid light-dark(#50535b, #c6c8cd); outline-offset: 3px; }
.slider-invert__row {
position: absolute;
inset: 0;
display: flex;
align-items: center;
justify-content: space-between;
padding: 0 16px;
font-size: 14px;
font-weight: 500;
color: light-dark(#42454c, #e5e6e9);
}
.slider-invert__row b { font-weight: 500; font-variant-numeric: tabular-nums; }
.slider-invert__label { display: flex; align-items: center; gap: 8px; }
.slider-invert__fill {
position: absolute;
inset: 0;
background: light-dark(#42454c, #e5e6e9);
clip-path: inset(0 calc(100% - var(--slider-invert-w)) 0 0 round 0 6px 6px 0);
transition: clip-path 0.12s ease-out;
}
.slider-invert__fill .slider-invert__row { color: light-dark(#f3f4f7, #1a1c1f); }
.slider-invert__icon { width: 18px; height: 18px; overflow: visible; }
.slider-invert__icon path { transition: opacity 0.2s, transform 0.3s cubic-bezier(0.3, 1.6, 0.5, 1); transform-box: fill-box; transform-origin: 0 50%; }
.slider-invert__icon .slider-invert__off { opacity: 0; transform: scale(0.4); }
.slider-invert__input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; -webkit-appearance: none; appearance: none; background: none; }
.slider-invert__input::-webkit-slider-thumb { -webkit-appearance: none; width: 2px; height: 48px; }
.slider-invert__input::-moz-range-thumb { width: 2px; height: 48px; border: 0; }
@media (prefers-reduced-motion: reduce) {
.slider-invert, .slider-invert__fill, .slider-invert__icon path { transition: none; }
}JavaScript
function initSliderInvert(root) {
var input = root.querySelector('.slider-invert__input');
// The label row exists twice: once on the track, once on the fill in the inverse colour.
var values = root.querySelectorAll('.slider-invert__row b');
var icons = root.querySelectorAll('.slider-invert__icon');
function update() {
var v = +input.value;
root.style.setProperty('--slider-invert-w', 'calc(1px + ' + v / 100 + ' * (100% - 2px))');
values.forEach(function (b) { b.textContent = v + '%'; });
// Waves come in as the level rises; at zero they give way to a cross.
icons.forEach(function (icon) {
var parts = icon.querySelectorAll('path');
parts[1].classList.toggle('slider-invert__off', v === 0);
parts[2].classList.toggle('slider-invert__off', v < 50);
parts[3].classList.toggle('slider-invert__off', v > 0);
});
input.setAttribute('aria-valuetext', v + '%');
}
input.addEventListener('input', update);
return function () { input.removeEventListener('input', update); };
}
document.querySelectorAll('.slider-invert').forEach(initSliderInvert);Goal: Create a "Invert" slider.
Visual behavior: A wide volume bar with its label inside: the fill sweeps under the words and inverts them where it covers them, and the speaker icon gains and loses waves as you go.
Technique:
- A real <input type="range"> lies over the drawing, transparent (opacity 0, appearance none), with its thumb hit area only 2px wide, so the fill edge follows the pointer exactly, so dragging, clicking the track and the arrow, Page Up/Down, Home and End keys all work natively. The drawing is aria-hidden.
- The label row is rendered twice: once on the track, and once on the fill in the inverse colour. The fill layer is clipped to the value with clip-path: inset(), so the inverted words show exactly where it covers them, cutting through letters.
- The speaker's two waves and its mute cross each fade and scale in by value.
Accessibility: A native range input with an aria-label and an aria-valuetext in percent; keyboard focus rings the whole bar. Under prefers-reduced-motion the fill moves without easing.
My stack: {{USER_STACK}}
My styling: {{USER_STYLING}}
My constraints: {{USER_CONSTRAINTS}}
My colors: neutral only. Black, white and grays, no hues. Use the color values above as written, or my project's closest neutral tokens.
Return a single self-contained component. No dependencies.Goal: Create a "Invert" slider.
Visual behavior: A wide volume bar with its label inside: the fill sweeps under the words and inverts them where it covers them, and the speaker icon gains and loses waves as you go.
Technique:
- A real <input type="range"> lies over the drawing, transparent (opacity 0, appearance none), with its thumb hit area only 2px wide, so the fill edge follows the pointer exactly, so dragging, clicking the track and the arrow, Page Up/Down, Home and End keys all work natively. The drawing is aria-hidden.
- The label row is rendered twice: once on the track, and once on the fill in the inverse colour. The fill layer is clipped to the value with clip-path: inset(), so the inverted words show exactly where it covers them, cutting through letters.
- The speaker's two waves and its mute cross each fade and scale in by value.
Accessibility: A native range input with an aria-label and an aria-valuetext in percent; keyboard focus rings the whole bar. Under prefers-reduced-motion the fill moves without easing.
My stack: {{USER_STACK}}
My styling: {{USER_STYLING}}
My constraints: {{USER_CONSTRAINTS}}
My colors: use my project's existing color tokens. The color values above are grayscale placeholders. Map each one by its role (surface, text, border, accent, glow) to my theme, and keep their relative lightness so contrast and the effect still read.
Return a single self-contained component. No dependencies.Paste into Claude, ChatGPT or Cursor after filling in {{USER_STACK}}, {{USER_STYLING}} and {{USER_CONSTRAINTS}}. Neutral keeps the greys you see here; Match my project asks the model to map them onto your own colour tokens.
Free to use in any project, commercial included. MIT-0, no attribution required. Licence
About this component
A wide volume bar with its label inside: the fill sweeps under the words and inverts them where it covers them, and the speaker icon gains and loses waves as you go.
- Dependencies
- None
- Difficulty
- Beginner
- Triggers
- state change, continuous, fill, icon
- Techniques
- clip path, css variables
- Reduced motion
- Respected
- Theme
- Light and dark (follows your page's color-scheme)
A native range input with an aria-label and an aria-valuetext in percent; keyboard focus rings the whole bar. Under prefers-reduced-motion the fill moves without easing.