Mood
React + Tailwind
import { useState } from 'react';
const WORDS = ['Awful', 'Bad', 'Okay', 'Good', 'Great'];
const css = `
.slider-mood { display: grid; justify-items: center; gap: 10px; width: 220px; }
.slider-mood__face { width: 96px; height: 96px; overflow: visible; transform: rotate(calc((var(--slider-mood-v) - 0.5) * 10deg)); transition: transform 0.4s cubic-bezier(0.3, 1.6, 0.5, 1); }
.slider-mood__head { fill: light-dark(#ebedf0, #232529); stroke: light-dark(#5f626a, #a7abb2); stroke-width: 2; }
.slider-mood__eye { fill: light-dark(#373a40, #f1f2f3); }
.slider-mood__brow, .slider-mood__mouth { fill: none; stroke: light-dark(#373a40, #f1f2f3); stroke-width: 3; stroke-linecap: round; }
.slider-mood__cheek { fill: light-dark(#6d7179, #7d8087); opacity: clamp(0, calc((var(--slider-mood-v) - 0.65) * 3), 0.8); }
.slider-mood__word { color: light-dark(#373a40, #f1f2f3); font-size: 14px; font-weight: 600; }
.slider-mood__track { position: relative; width: 100%; height: 26px; }
.slider-mood__rail { position: absolute; left: 0; right: 0; top: 10px; height: 6px; border-radius: 3px; background: linear-gradient(90deg, light-dark(#dbdde1, #2e3035), light-dark(#42454c, #e5e6e9)); }
.slider-mood__thumb { position: absolute; top: 2px; left: calc(var(--slider-mood-v) * (100% - 22px)); width: 22px; height: 22px; border-radius: 50%; background: light-dark(#373a40, #f1f2f3); box-shadow: 0 0 0 3px light-dark(#f3f4f7, #1a1c1f), 0 2px 6px light-dark(rgba(0, 0, 0, 0.12), rgba(0, 0, 0, 0.4)); }
.slider-mood:has(.slider-mood__input:focus-visible) .slider-mood__thumb { outline: 2px solid light-dark(#50535b, #c6c8cd); outline-offset: 4px; }
.slider-mood__input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; -webkit-appearance: none; appearance: none; background: none; }
.slider-mood__input::-webkit-slider-thumb { -webkit-appearance: none; width: 22px; height: 22px; }
.slider-mood__input::-moz-range-thumb { width: 22px; height: 22px; border: 0; }
@media (prefers-reduced-motion: reduce) {
.slider-mood__face { transition: none; }
}
`;
export function MoodSlider() {
const [v, setV] = useState(70);
const t = v / 100;
const f = (n: number) => n.toFixed(1);
const curve = -14 + t * 32; // mouth: frown below zero, grin above
// Brows: the inner ends lift when it is bad (worried), and both sit level and raised when it is good.
const browOuter = 28 - t * 3;
const browInner = 28 - (1 - t) * 7 - t * 3;
const arch = t * 4;
const eye = 5.5 - t * 2.5;
const word = WORDS[Math.min(4, Math.floor(t * 5))];
return (
<>
<style>
{css}
</style>
<div className="slider-mood" style={{ '--slider-mood-v': t } as React.CSSProperties}>
<svg className="slider-mood__face" viewBox="0 0 96 96" aria-hidden="true">
<circle className="slider-mood__head" cx="48" cy="48" r="44" />
<ellipse className="slider-mood__cheek" cx="24" cy="58" rx="7" ry="4" />
<ellipse className="slider-mood__cheek" cx="72" cy="58" rx="7" ry="4" />
<ellipse className="slider-mood__eye" cx="34" cy="40" rx="4" ry={f(eye)} />
<ellipse className="slider-mood__eye" cx="62" cy="40" rx="4" ry={f(eye)} />
<path className="slider-mood__brow" d={`M26 ${f(browOuter)}Q33 ${f((browOuter + browInner) / 2 - arch)} 40 ${f(browInner)}`} />
<path className="slider-mood__brow" d={`M70 ${f(browOuter)}Q63 ${f((browOuter + browInner) / 2 - arch)} 56 ${f(browInner)}`} />
<path className="slider-mood__mouth" d={`M32 ${f(64 - curve * 0.25)}Q48 ${f(64 + curve)} 64 ${f(64 - curve * 0.25)}`} />
</svg>
<span className="slider-mood__word" aria-hidden="true">
{word}
</span>
<div className="slider-mood__track">
<span className="slider-mood__rail" />
<span className="slider-mood__thumb" />
<input className="slider-mood__input" type="range" min={0} max={100} value={v} onChange={(e) => setV(+e.target.value)} aria-label="How was it?" aria-valuetext={word} />
</div>
</div>
</>
);
}Markup where the component goes, CSS in your stylesheet, script before </body>. In Vue, Svelte or Angular, call initSliderMood(el) on the mounted element instead.
HTML
<div class="slider-mood" style="--slider-mood-v:0.7">
<svg class="slider-mood__face" viewBox="0 0 96 96" aria-hidden="true">
<circle class="slider-mood__head" cx="48" cy="48" r="44"></circle>
<ellipse class="slider-mood__cheek" cx="24" cy="58" rx="7" ry="4"></ellipse>
<ellipse class="slider-mood__cheek" cx="72" cy="58" rx="7" ry="4"></ellipse>
<ellipse class="slider-mood__eye" cx="34" cy="40" rx="4" ry="3.8"></ellipse>
<ellipse class="slider-mood__eye" cx="62" cy="40" rx="4" ry="3.8"></ellipse>
<path class="slider-mood__brow" d="M26 25.9Q33 22.0 40 23.8"></path>
<path class="slider-mood__brow" d="M70 25.9Q63 22.0 56 23.8"></path>
<path class="slider-mood__mouth" d="M32 61.9Q48 72.4 64 61.9"></path>
</svg>
<span class="slider-mood__word" aria-hidden="true">Good</span>
<div class="slider-mood__track">
<span class="slider-mood__rail"></span>
<span class="slider-mood__thumb"></span>
<input class="slider-mood__input" type="range" min="0" max="100" aria-label="How was it?" aria-valuetext="Good" value="70"/>
</div>
</div>CSS
.slider-mood { display: grid; justify-items: center; gap: 10px; width: 220px; }
.slider-mood__face { width: 96px; height: 96px; overflow: visible; transform: rotate(calc((var(--slider-mood-v) - 0.5) * 10deg)); transition: transform 0.4s cubic-bezier(0.3, 1.6, 0.5, 1); }
.slider-mood__head { fill: light-dark(#ebedf0, #232529); stroke: light-dark(#5f626a, #a7abb2); stroke-width: 2; }
.slider-mood__eye { fill: light-dark(#373a40, #f1f2f3); }
.slider-mood__brow, .slider-mood__mouth { fill: none; stroke: light-dark(#373a40, #f1f2f3); stroke-width: 3; stroke-linecap: round; }
.slider-mood__cheek { fill: light-dark(#6d7179, #7d8087); opacity: clamp(0, calc((var(--slider-mood-v) - 0.65) * 3), 0.8); }
.slider-mood__word { color: light-dark(#373a40, #f1f2f3); font-size: 14px; font-weight: 600; }
.slider-mood__track { position: relative; width: 100%; height: 26px; }
.slider-mood__rail { position: absolute; left: 0; right: 0; top: 10px; height: 6px; border-radius: 3px; background: linear-gradient(90deg, light-dark(#dbdde1, #2e3035), light-dark(#42454c, #e5e6e9)); }
.slider-mood__thumb { position: absolute; top: 2px; left: calc(var(--slider-mood-v) * (100% - 22px)); width: 22px; height: 22px; border-radius: 50%; background: light-dark(#373a40, #f1f2f3); box-shadow: 0 0 0 3px light-dark(#f3f4f7, #1a1c1f), 0 2px 6px light-dark(rgba(0, 0, 0, 0.12), rgba(0, 0, 0, 0.4)); }
.slider-mood:has(.slider-mood__input:focus-visible) .slider-mood__thumb { outline: 2px solid light-dark(#50535b, #c6c8cd); outline-offset: 4px; }
.slider-mood__input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; -webkit-appearance: none; appearance: none; background: none; }
.slider-mood__input::-webkit-slider-thumb { -webkit-appearance: none; width: 22px; height: 22px; }
.slider-mood__input::-moz-range-thumb { width: 22px; height: 22px; border: 0; }
@media (prefers-reduced-motion: reduce) {
.slider-mood__face { transition: none; }
}JavaScript
function initSliderMood(root) {
var WORDS = ['Awful', 'Bad', 'Okay', 'Good', 'Great'];
var input = root.querySelector('.slider-mood__input');
var eyes = root.querySelectorAll('.slider-mood__eye');
var brows = root.querySelectorAll('.slider-mood__brow');
var mouth = root.querySelector('.slider-mood__mouth');
var word = root.querySelector('.slider-mood__word');
function f(n) { return n.toFixed(1); }
function update() {
var t = input.value / 100;
var curve = -14 + t * 32; // mouth: frown below zero, grin above
// Brows: the inner ends lift when it is bad (worried), and both sit level and raised when it is good.
var outer = 28 - t * 3;
var inner = 28 - (1 - t) * 7 - t * 3;
var peak = f((outer + inner) / 2 - t * 4);
var w = WORDS[Math.min(4, Math.floor(t * 5))];
root.style.setProperty('--slider-mood-v', t);
eyes.forEach(function (eye) { eye.setAttribute('ry', f(5.5 - t * 2.5)); });
brows[0].setAttribute('d', 'M26 ' + f(outer) + 'Q33 ' + peak + ' 40 ' + f(inner));
brows[1].setAttribute('d', 'M70 ' + f(outer) + 'Q63 ' + peak + ' 56 ' + f(inner));
mouth.setAttribute('d', 'M32 ' + f(64 - curve * 0.25) + 'Q48 ' + f(64 + curve) + ' 64 ' + f(64 - curve * 0.25));
word.textContent = w;
input.setAttribute('aria-valuetext', w);
}
input.addEventListener('input', update);
update();
return function () { input.removeEventListener('input', update); };
}
document.querySelectorAll('.slider-mood').forEach(initSliderMood);Goal: Create a "Mood" slider.
Visual behavior: A rating slider with a face: drag and the mouth bends from a frown to a grin, the brows go from worried to raised, the eyes widen and a word names the mood.
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 mouth and brows are quadratic curves recalculated from the value; the inner ends of the brows lift when it is bad, and both sit level and raised when it is good.
- The face tilts a little with the mood, the cheeks blush in near the top, and the word (Awful to Great) is the aria-valuetext.
- :has(input:focus-visible) outlines the drawn thumb, so keyboard focus is visible though the input itself is not.
Accessibility: A native range input with an aria-label and an aria-valuetext in words, so a screen reader announces the reading rather than a bare number; keyboard focus outlines the drawn thumb. Under prefers-reduced-motion the face changes without a transition.
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 "Mood" slider.
Visual behavior: A rating slider with a face: drag and the mouth bends from a frown to a grin, the brows go from worried to raised, the eyes widen and a word names the mood.
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 mouth and brows are quadratic curves recalculated from the value; the inner ends of the brows lift when it is bad, and both sit level and raised when it is good.
- The face tilts a little with the mood, the cheeks blush in near the top, and the word (Awful to Great) is the aria-valuetext.
- :has(input:focus-visible) outlines the drawn thumb, so keyboard focus is visible though the input itself is not.
Accessibility: A native range input with an aria-label and an aria-valuetext in words, so a screen reader announces the reading rather than a bare number; keyboard focus outlines the drawn thumb. Under prefers-reduced-motion the face changes without a transition.
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 rating slider with a face: drag and the mouth bends from a frown to a grin, the brows go from worried to raised, the eyes widen and a word names the mood.
- Dependencies
- None
- Difficulty
- Intermediate
- Triggers
- state change, morph
- Techniques
- svg, 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 words, so a screen reader announces the reading rather than a bare number; keyboard focus outlines the drawn thumb. Under prefers-reduced-motion the face changes without a transition.