Nudge
React + Tailwind
import { useState } from 'react';
const W = 240;
const T = 18;
const PW = 46;
const LW = 30;
const Y = 44;
const at = (v: number) => T / 2 + (v / 100) * (W - T);
const css = `
.slider-nudge { position: relative; width: ${W}px; height: 64px; }
.slider-nudge__end, .slider-nudge__pill { position: absolute; top: 4px; height: 22px; font-size: 12px; line-height: 22px; }
.slider-nudge__end {
width: ${LW}px;
color: light-dark(#5f626a, #a7abb2);
transition: transform 0.35s cubic-bezier(0.3, 1.7, 0.5, 1), opacity 0.2s;
}
.slider-nudge__end--min { left: 0; text-align: left; transform-origin: 0 100%; }
.slider-nudge__end--max { right: 0; text-align: right; transform-origin: 100% 100%; }
.slider-nudge__pill {
width: ${PW}px;
margin-left: ${-PW / 2}px;
border-radius: 11px;
background: light-dark(#373a40, #f1f2f3);
color: light-dark(#fbfcfd, #121417);
font-weight: 600;
text-align: center;
font-variant-numeric: tabular-nums;
}
.slider-nudge__pill::after { content: ''; position: absolute; left: 50%; bottom: -4px; margin-left: -4px; border: 4px solid transparent; border-bottom: 0; border-top-color: light-dark(#373a40, #f1f2f3); }
.slider-nudge__rail, .slider-nudge__fill { position: absolute; left: 0; top: ${Y - 2}px; height: 4px; border-radius: 2px; }
.slider-nudge__rail { width: ${W}px; background: light-dark(#ebedf0, #232529); }
.slider-nudge__fill { background: light-dark(#50535b, #c6c8cd); }
.slider-nudge__thumb { position: absolute; top: ${Y - T / 2}px; width: ${T}px; height: ${T}px; margin-left: ${-T / 2}px; border-radius: 50%; background: light-dark(#373a40, #f1f2f3); box-shadow: 0 2px 5px light-dark(rgba(0, 0, 0, 0.16), rgba(0, 0, 0, 0.5)); }
.slider-nudge:has(.slider-nudge__input:focus-visible) .slider-nudge__thumb { outline: 2px solid light-dark(#50535b, #c6c8cd); outline-offset: 3px; }
.slider-nudge__input { position: absolute; left: 0; top: ${Y - 18}px; width: 100%; height: 36px; margin: 0; opacity: 0; cursor: pointer; -webkit-appearance: none; appearance: none; background: none; }
.slider-nudge__input::-webkit-slider-thumb { -webkit-appearance: none; width: ${T}px; height: 36px; }
.slider-nudge__input::-moz-range-thumb { width: ${T}px; height: 36px; border: 0; }
@media (prefers-reduced-motion: reduce) {
.slider-nudge__end { transition: opacity 0.2s; }
}
`;
// How far the value pill overlaps an end label, and the knock that gives it: down, out and tipped over.
const shove = (overlap: number, side: 1 | -1) => {
const o = Math.min(28, Math.max(0, overlap));
return { transform: `translate(${side * o * 0.25}px, ${o * 0.75}px) rotate(${side * o * 1.6}deg) scale(${1 - o * 0.008})`, opacity: 1 - o * 0.018 };
};
export function NudgeSlider() {
const [v, setV] = useState(24);
const x = at(v);
const left = x - PW / 2;
const right = x + PW / 2;
return (
<>
<style>
{css}
</style>
<div className="slider-nudge">
<span className="slider-nudge__end slider-nudge__end--min" style={shove(LW + 4 - left, -1)} aria-hidden="true">
Off
</span>
<span className="slider-nudge__end slider-nudge__end--max" style={shove(right - (W - LW - 4), 1)} aria-hidden="true">
Max
</span>
<span className="slider-nudge__pill" style={{ left: x }} aria-hidden="true">
{v}%
</span>
<span className="slider-nudge__rail" aria-hidden="true" />
<span className="slider-nudge__fill" style={{ width: x }} aria-hidden="true" />
<span className="slider-nudge__thumb" style={{ left: x }} aria-hidden="true" />
<input className="slider-nudge__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 initSliderNudge(el) on the mounted element instead.
HTML
<div class="slider-nudge">
<span class="slider-nudge__end slider-nudge__end--min" style="transform:translate(0px, 0px) rotate(0deg) scale(1);opacity:1" aria-hidden="true">Off</span>
<span class="slider-nudge__end slider-nudge__end--max" style="transform:translate(0px, 0px) rotate(0deg) scale(1);opacity:1" aria-hidden="true">Max</span>
<span class="slider-nudge__pill" style="left:62.28px" aria-hidden="true">24%</span>
<span class="slider-nudge__rail" aria-hidden="true"></span>
<span class="slider-nudge__fill" style="width:62.28px" aria-hidden="true"></span>
<span class="slider-nudge__thumb" style="left:62.28px" aria-hidden="true"></span>
<input class="slider-nudge__input" type="range" min="0" max="100" aria-label="Volume" aria-valuetext="24%" value="24"/>
</div>CSS
.slider-nudge { position: relative; width: 240px; height: 64px; }
.slider-nudge__end, .slider-nudge__pill { position: absolute; top: 4px; height: 22px; font-size: 12px; line-height: 22px; }
.slider-nudge__end {
width: 30px;
color: light-dark(#5f626a, #a7abb2);
transition: transform 0.35s cubic-bezier(0.3, 1.7, 0.5, 1), opacity 0.2s;
}
.slider-nudge__end--min { left: 0; text-align: left; transform-origin: 0 100%; }
.slider-nudge__end--max { right: 0; text-align: right; transform-origin: 100% 100%; }
.slider-nudge__pill {
width: 46px;
margin-left: -23px;
border-radius: 11px;
background: light-dark(#373a40, #f1f2f3);
color: light-dark(#fbfcfd, #121417);
font-weight: 600;
text-align: center;
font-variant-numeric: tabular-nums;
}
.slider-nudge__pill::after { content: ''; position: absolute; left: 50%; bottom: -4px; margin-left: -4px; border: 4px solid transparent; border-bottom: 0; border-top-color: light-dark(#373a40, #f1f2f3); }
.slider-nudge__rail, .slider-nudge__fill { position: absolute; left: 0; top: 42px; height: 4px; border-radius: 2px; }
.slider-nudge__rail { width: 240px; background: light-dark(#ebedf0, #232529); }
.slider-nudge__fill { background: light-dark(#50535b, #c6c8cd); }
.slider-nudge__thumb { position: absolute; top: 35px; width: 18px; height: 18px; margin-left: -9px; border-radius: 50%; background: light-dark(#373a40, #f1f2f3); box-shadow: 0 2px 5px light-dark(rgba(0, 0, 0, 0.16), rgba(0, 0, 0, 0.5)); }
.slider-nudge:has(.slider-nudge__input:focus-visible) .slider-nudge__thumb { outline: 2px solid light-dark(#50535b, #c6c8cd); outline-offset: 3px; }
.slider-nudge__input { position: absolute; left: 0; top: 26px; width: 100%; height: 36px; margin: 0; opacity: 0; cursor: pointer; -webkit-appearance: none; appearance: none; background: none; }
.slider-nudge__input::-webkit-slider-thumb { -webkit-appearance: none; width: 18px; height: 36px; }
.slider-nudge__input::-moz-range-thumb { width: 18px; height: 36px; border: 0; }
@media (prefers-reduced-motion: reduce) {
.slider-nudge__end { transition: opacity 0.2s; }
}JavaScript
function initSliderNudge(root) {
var W = 240;
var T = 18;
var PW = 46;
var LW = 30;
var input = root.querySelector('.slider-nudge__input');
var min = root.querySelector('.slider-nudge__end--min');
var max = root.querySelector('.slider-nudge__end--max');
var pill = root.querySelector('.slider-nudge__pill');
var fill = root.querySelector('.slider-nudge__fill');
var thumb = root.querySelector('.slider-nudge__thumb');
function at(v) { return T / 2 + (v / 100) * (W - T); }
// How far the value pill overlaps an end label, and the knock that gives it: down, out and tipped over.
function shove(el, overlap, side) {
var o = Math.min(28, Math.max(0, overlap));
el.style.transform = 'translate(' + side * o * 0.25 + 'px, ' + o * 0.75 + 'px) rotate(' + side * o * 1.6 + 'deg) scale(' + (1 - o * 0.008) + ')';
el.style.opacity = 1 - o * 0.018;
}
function update() {
var v = +input.value;
var x = at(v);
shove(min, LW + 4 - (x - PW / 2), -1);
shove(max, x + PW / 2 - (W - LW - 4), 1);
pill.style.left = x + 'px';
pill.textContent = v + '%';
fill.style.width = x + 'px';
thumb.style.left = x + 'px';
input.setAttribute('aria-valuetext', v + '%');
}
input.addEventListener('input', update);
return function () {
input.removeEventListener('input', update);
};
}
document.querySelectorAll('.slider-nudge').forEach(initSliderNudge);Goal: Create a "Nudge" slider.
Visual behavior: The value label rides above the thumb and shoves the Off and Max labels out of the way as it comes near: they get knocked down, out and tipped over, so the three never overlap.
Technique:
- A real <input type="range"> lies over the drawing, transparent (opacity 0, appearance none), with its thumb hit area sized to the drawn thumb, so dragging, clicking the track and the arrow, Page Up/Down, Home and End keys all work natively. The drawing is aria-hidden.
- The overlap between the value pill and each end label is measured from their known widths. That overlap, capped, becomes a translate, a rotation and a slight shrink and fade on the end label, through a transition with a strong overshoot so the labels bounce as they are bumped and when they swing back.
Accessibility: A native range input with an aria-label and an aria-valuetext in percent; keyboard focus rings the thumb. Under prefers-reduced-motion the end labels move without the bounce.
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 "Nudge" slider.
Visual behavior: The value label rides above the thumb and shoves the Off and Max labels out of the way as it comes near: they get knocked down, out and tipped over, so the three never overlap.
Technique:
- A real <input type="range"> lies over the drawing, transparent (opacity 0, appearance none), with its thumb hit area sized to the drawn thumb, so dragging, clicking the track and the arrow, Page Up/Down, Home and End keys all work natively. The drawing is aria-hidden.
- The overlap between the value pill and each end label is measured from their known widths. That overlap, capped, becomes a translate, a rotation and a slight shrink and fade on the end label, through a transition with a strong overshoot so the labels bounce as they are bumped and when they swing back.
Accessibility: A native range input with an aria-label and an aria-valuetext in percent; keyboard focus rings the thumb. Under prefers-reduced-motion the end labels move without the bounce.
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
The value label rides above the thumb and shoves the Off and Max labels out of the way as it comes near: they get knocked down, out and tipped over, so the three never overlap.
- Dependencies
- None
- Difficulty
- Beginner
- Triggers
- state change, spring
- Techniques
- css transition, transform only
- 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 thumb. Under prefers-reduced-motion the end labels move without the bounce.