GODRICH
#css-animation#button#loader#transition#scroll#dashboard#ui#design-trends

Difficulty Selector UI — 9 Computed Patterns

· Godrich · 9 items · 27 min read

PickersSCSSVanilla JSClickHoverFormsGames & play

Among nine difficulty selector ui patterns, a slider handle overshoots then springs back, badge colors come from a hue formula, and a gauge turns drag angle

Dot Difficulty Selector With a Color Ramp01 difficulty-selector-dot-ramp Difficulty Cards Whose Shadow Deepens With the Chosen Tier02 difficulty-selector-radio-card-grid A Difficulty Slider That Overshoots and Springs Back Onto Its Tier03 difficulty-selector-slider-snap-tier A Bar Difficulty Meter With a Gloss Sweep on Change04 difficulty-selector-bar-meter-fill Difficulty Selector Whose Icon Shape Morphs Per Tier05 difficulty-selector-icon-morph-shape Keyboard Difficulty Selector Whose Focus Ring Trails With Inertia06 difficulty-selector-keyboard-arrow-lerp Badge Difficulty Selector Whose Color Comes From a Hue Formula07 difficulty-selector-badge-hue-shift Numeric Difficulty Stepper Whose Digit Rolls Like an Odometer08 difficulty-selector-numeric-stepper-odometer Semicircular Difficulty Gauge Set by Drag Angle09 difficulty-selector-gauge-arc-drag

Auto-plays · click a tile to jump to its section · all nine in one zip

This set puts nine difficulty pickers in one row: a color-ramp dot row, a shadow-deepening card grid, a spring-snap slider, a gloss-sweep bar meter, an icon that morphs its shape per tier, a keyboard focus ring that trails with inertia, a badge row whose colors come from a formula, an odometer-style numeric stepper, and a drag-angle gauge. Building this kind of tier picker with nine different shapes could mean nine different libraries, but every pattern below instead adds exactly one small calculation function on top of the same click/keydown baseline — a function you can read start to finish in the code section rather than trust as a black box.

Demo

Dot Difficulty Selector With a Color Ramp
Open in a new tab

01 · Dot Difficulty Selector With a Color Ramp — Measured area 3.112% · moving frames 13/23Original by GODRICH · SCSS and React ship in the zip · See the password

dotHuedotColorpaintUpTo

Pattern 01 above needs nothing beyond dotHue, dotColor, and paintUpTo to turn a hovered dot into a color-ramped fill. The other eight follow below, each one paired with its own code block.

Anatomy of nine difficulty pickers — where the one layer of calculation runs

# Pattern Cumulative area Avg. intensity Frames moved
01 Dot color ramp 3.11% 68.0 13 of 23
02 Card shadow depth 8.92% 78.1 12 of 23
03 Spring-snap slider 4.29% 108.3 13 of 23
04 Bar meter gloss sweep 2.77% 77.6 12 of 23
05 Icon shape morph 2.07% 81.1 11 of 23
06 Keyboard focus-ring lerp 5.87% 144.7 14 of 23
07 Badge hue formula 4.04% 70.0 10 of 23
08 Odometer stepper 0.69% 105.6 11 of 23
09 Gauge arc drag 2.20% 116.6 9 of 23

Pattern 02 covers the most pixels of the nine (8.92% cumulative) because every tier change repaints a whole card's box-shadow and lift transform, not just a small dot or badge. Pattern 08 covers the least (0.69%) since only two digit columns slide inside a fixed display frame. Pattern 06 has the highest average intensity of the nine (144.7) and moves in the most frames (14 of 23), because its requestAnimationFrame loop keeps recalculating the ring's position every frame it's still catching up to the target. Pattern 09 moves in the fewest frames (9 of 23) — its needle rotation and zone highlight only repaint on a pointermove, pointerup, or arrow key, so idle frames between drags paint nothing.

Constants that shape one visible property

Patterns 01, 02, and 07 each compute a single visual property — color or shadow depth — directly from the tier index, with no easing or physics step in between. 01's dotHue(i) interpolates a hue between HUE_LOW and HUE_HIGH by i / (LEVELS.length - 1). 02's shadowFor(tier) multiplies the tier number by Y_STEP, BLUR_STEP, and LIFT_STEP to get a shadow's y-offset, blur, and lift. 07's badgeHue(i) adds i * HUE_SPACING onto BASE_HUE and wraps at 360.

Physics and easing over time

Patterns 03, 04, 05, and 06 all run a requestAnimationFrame loop that recalculates a position every frame until it settles, rather than jumping straight to a target. 03's springTo integrates a spring-damper force (-SPRING_K * (pos - target) - SPRING_D * vel) each frame, letting the handle overshoot its tier before settling. 04's sweep drives a gloss band's left position through easeOutCubic(t). 05's morphTo interpolates every one of POINTS outline radii toward the next tier's polygon shape with the same cubic ease. 06's loop closes TRAIL_LERP of the remaining distance between the focus ring and its target on every frame.

Pointer-geometry conversions

Patterns 03, 04, and 09 all convert a raw pointer coordinate into a tier value by reading real element geometry. 03 and 04 divide the pointer's offset from the track's getBoundingClientRect() left edge by the track's width. 09's angleToValue instead computes Math.atan2 between the pointer and the gauge's pivot point, then maps the resulting angle onto a 0–4 value — the only one of the nine that reads an angle instead of a straight-line offset.

Code per pattern

Each block below is copied straight from the pattern's own index.html — identical variable names, identical order, nothing trimmed out.

01Dot Difficulty Selector With a Color Ramp

Hovering over a dot fills every dot up to it with a color computed along a green-to-red ramp, and only the chosen dot keeps that color once picked. Use it for a spot to pick a felt difficulty before a survey or quiz.

Dot Difficulty Selector With a Color Ramp
Open in a new tab

01 · Dot Difficulty Selector With a Color Ramp — Measured area 3.112% · moving frames 13/23Original by GODRICH · SCSS and React ship in the zip · See the password

dotHuedotColorpaintUpTo
  // Calculation layer: turns the dot index (0-4) into a hue value along a ramp from green (132deg) to red (0deg)
  function dotHue(i) { return HUE_LOW + (HUE_HIGH - HUE_LOW) * (i / (LEVELS.length - 1)); }
  function dotColor(i) { return 'hsl(' + dotHue(i).toFixed(1) + ', ' + SAT + '%, ' + LIGHT + '%)'; }

  function paintUpTo(i) {
    dots.forEach(function (d, idx) {
      d.style.background = idx <= i ? dotColor(idx) : '';
    });
    fill.style.width = ((i + 1) / LEVELS.length * 100) + '%';
    fill.style.background = dotColor(i);
  }

02Difficulty Cards Whose Shadow Deepens With the Chosen Tier

Choosing a card computes its shadow height and blur in proportion to the tier's step number, so a harder card visibly lifts further off the page. Use it for a place to pick easy, medium, or hard on an app's start screen.

Difficulty Cards Whose Shadow Deepens With the Chosen Tier
Open in a new tab

02 · Difficulty Cards Whose Shadow Deepens With the Chosen Tier — Measured area 8.917% · moving frames 12/23Original by GODRICH · SCSS and React ship in the zip · See the password

shadowForpaintselect
  // Calculation layer: works out the shadow's y-offset, blur, and lift not as fixed values but in proportion to the tier number
  function shadowFor(tier) {
    var y = BASE_Y + tier * Y_STEP;
    var blur = BASE_BLUR + tier * BLUR_STEP;
    var lift = BASE_LIFT + tier * LIFT_STEP;
    return { y: y, blur: blur, lift: lift };
  }
  function paint() {
    cards.forEach(function (c, i) {
      var on = i === selected;
      c.setAttribute('aria-checked', on ? 'true' : 'false');
      c.setAttribute('tabindex', on ? '0' : '-1');
      if (on) {
        var s = shadowFor(i);
        c.style.boxShadow = '0 ' + s.y + 'px ' + s.blur + 'px rgba(23, 20, 26, .38)';
        c.style.transform = 'translateY(-' + s.lift + 'px)';
      } else {
        c.style.boxShadow = '';
        c.style.transform = '';
      }
    });
  }

03A Difficulty Slider That Overshoots and Springs Back Onto Its Tier

Releasing the handle lets it slide slightly past the nearest tier, then a spring calculation pulls it back to settle exactly on that tier. Use it for a place to drag a finger to set difficulty on a settings screen.

A Difficulty Slider That Overshoots and Springs Back Onto Its Tier
Open in a new tab

03 · A Difficulty Slider That Overshoots and Springs Back Onto Its Tier — Measured area 4.291% · moving frames 13/23Original by GODRICH · SCSS and React ship in the zip · See the password

springTotierPctpaintAt
  // Calculation layer: integrates a spring-damper equation (accel = -k*(pos-target) - d*vel) every frame toward the target tier,
  // letting the handle slide slightly past it (overshoot) before springing back to settle exactly there
  function springTo(target) {
    cancelAnimationFrame(raf);
    if (reduce) { pos = target; paintAt(pos); return; }
    var vel = 0;
    function step() {
      var force = -SPRING_K * (pos - target) - SPRING_D * vel;
      vel += force * DT;
      pos += vel * DT;
      paintAt(pos);
      if (Math.abs(pos - target) > 0.15 || Math.abs(vel) > 0.15) raf = requestAnimationFrame(step);
      else { pos = target; paintAt(pos); }
    }
    raf = requestAnimationFrame(step);
  }

04A Bar Difficulty Meter With a Gloss Sweep on Change

Each time the difficulty changes, a bright band's left-to-right position inside the bar is recalculated every frame as it sweeps across. Use it for a place on a dashboard that shows the current difficulty level at a glance.

A Bar Difficulty Meter With a Gloss Sweep on Change
Open in a new tab

04 · A Bar Difficulty Meter With a Gloss Sweep on Change — Measured area 2.773% · moving frames 12/23Original by GODRICH · SCSS and React ship in the zip · See the password

easeOutCubicsweeppaint
  function easeOutCubic(t) { return 1 - Math.pow(1 - t, 3); }
  // Calculation layer: whenever the fill changes, recalculates the bright band's position every frame via easeOutCubic(elapsed ratio), sweeping it left to right
  function sweep() {
    cancelAnimationFrame(raf);
    if (reduce) { gloss.style.opacity = '0'; return; }
    t0 = performance.now();
    gloss.style.opacity = '1';
    function step(now) {
      var t = Math.min(1, (now - t0) / SWEEP_MS);
      gloss.style.left = (easeOutCubic(t) * 100) + '%';
      if (t < 1) raf = requestAnimationFrame(step);
      else gloss.style.opacity = '0';
    }
    raf = requestAnimationFrame(step);
  }

05Difficulty Selector Whose Icon Shape Morphs Per Tier

Moving between tiers interpolates the icon outline's coordinates toward the next tier's shape, so the form flows continuously instead of swapping. Use it for a spot in game settings that shows a symbolic icon per difficulty.

Difficulty Selector Whose Icon Shape Morphs Per Tier
Open in a new tab

05 · Difficulty Selector Whose Icon Shape Morphs Per Tier — Measured area 2.066% · moving frames 11/23Original by GODRICH · SCSS and React ship in the zip · See the password

polygonRadiusbuildPathradiiFor
  // Calculation layer: a geometry formula that gets the radius in direction theta for a regular polygon of a given side count.
  // The farther theta sits from a side's own center (the closer it gets to a vertex), the longer the radius grows
  function polygonRadius(theta, sides) {
    var seg = (2 * Math.PI) / sides;
    var a = ((theta % seg) + seg) % seg - seg / 2;
    return R * Math.cos(seg / 2) / Math.cos(a);
  }
  function angleAt(i) { return (i / POINTS) * Math.PI * 2 - Math.PI / 2; }
  function radiiFor(sides) {
    var out = [];
    for (var i = 0; i < POINTS; i++) out.push(polygonRadius(angleAt(i), sides));
    return out;
  }

06Keyboard Difficulty Selector Whose Focus Ring Trails With Inertia

Pressing an arrow key moves the tier instantly, but the focus ring trails behind, closing only a fraction of the remaining distance each frame until it settles. Use it for a keyboard-only difficulty pick in an accessibility settings panel.

Keyboard Difficulty Selector Whose Focus Ring Trails With Inertia
Open in a new tab

06 · Keyboard Difficulty Selector Whose Focus Ring Trails With Inertia — Measured area 5.865% · moving frames 14/23Original by GODRICH · SCSS and React ship in the zip · See the password

measuremoveRingTopaintRing
  function measure(i) {
    var r = opts[i].getBoundingClientRect();
    var pr = rowEl.getBoundingClientRect();
    return { x: r.left - pr.left, w: r.width };
  }
  function paintRing(x, w) { ring.style.transform = 'translateX(' + x + 'px)'; ring.style.width = w + 'px'; }
  // Calculation layer: an exponential decay (lerp) that closes only a TRAIL_LERP fraction of the remaining distance each frame, so the ring trails behind its target
  function loop() {
    ringX += (targetX - ringX) * TRAIL_LERP;
    ringW += (targetW - ringW) * TRAIL_LERP;
    paintRing(ringX, ringW);
    if (Math.abs(targetX - ringX) > 0.4 || Math.abs(targetW - ringW) > 0.4) raf = requestAnimationFrame(loop);
    else { ringX = targetX; ringW = targetW; paintRing(ringX, ringW); }
  }

07Badge Difficulty Selector Whose Color Comes From a Hue Formula

The five badges aren't five fixed colors — each color comes from feeding the tier number into a hue-angle formula, so adding a tier recalculates the spacing between all the colors. Use it for a place in an admin screen that tags a difficulty tier like a label.

Badge Difficulty Selector Whose Color Comes From a Hue Formula
Open in a new tab

07 · Badge Difficulty Selector Whose Color Comes From a Hue Formula — Measured area 4.045% · moving frames 10/23Original by GODRICH · SCSS and React ship in the zip · See the password

badgeHuebadgeColorpaint
  // Calculation layer: gets each badge's color not from five fixed values but by feeding the tier index into a hue formula (base hue + index * spacing)
  function badgeHue(i) { return (BASE_HUE + i * HUE_SPACING) % 360; }
  function badgeColor(i) { return 'hsl(' + badgeHue(i) + ', ' + SAT + '%, ' + LIGHT + '%)'; }
  function paint() {
    badges.forEach(function (b, i) {
      b.style.background = badgeColor(i);
      b.setAttribute('aria-checked', i === selected ? 'true' : 'false');
      b.setAttribute('tabindex', i === selected ? '0' : '-1');
    });
  }

08Numeric Difficulty Stepper Whose Digit Rolls Like an Odometer

Pressing + or - spins a single digit column to the next value, its offset worked out from that digit's place value, and a carry spins the digit to its left too. Use it for a place in a form to set a question's difficulty score as a number.

Numeric Difficulty Stepper Whose Digit Rolls Like an Odometer
Open in a new tab

08 · Numeric Difficulty Stepper Whose Digit Rolls Like an Odometer — Measured area 0.688% · moving frames 11/23Original by GODRICH · SCSS and React ship in the zip · See the password

placeDigitpaintset
  // Calculation layer: gets each reel's digit from the ones place of the value divided by 10^place (placeDigit),
  // then shifts the reel by that digit's value times the row height so it lands in the window — a carry falls out naturally once the quotient changes
  function placeDigit(v, place) { return Math.floor(v / Math.pow(10, place)) % 10; }
  function paint() {
    var ones = placeDigit(value, 0), tens = placeDigit(value, 1);
    onesStrip.style.transform = 'translateY(-' + (ones * DIGIT_H) + 'px)';
    tensStrip.style.transform = 'translateY(-' + (tens * DIGIT_H) + 'px)';
    display.setAttribute('aria-valuenow', String(value));
    out.textContent = String(value);
  }

09Semicircular Difficulty Gauge Set by Drag Angle

Dragging the needle computes the angle from the gauge's center to the finger and converts that angle into a difficulty value, redrawing the arc's colored zones to match. Use it for a place on a settings dashboard to fine-tune difficulty with a fingertip.

Semicircular Difficulty Gauge Set by Drag Angle
Open in a new tab

09 · Semicircular Difficulty Gauge Set by Drag Angle — Measured area 2.203% · moving frames 9/23Original by GODRICH · SCSS and React ship in the zip · See the password

angleToValuezoneCenterDegpaint
  function zoneCenterDeg(i) { return -90 + ZONE_DEG / 2 + i * ZONE_DEG; }
  zones.forEach(function (z, i) { z.style.transform = 'rotate(' + zoneCenterDeg(i) + 'deg)'; });

  // Calculation layer: gets the angle between the pointer and the pivot (bottom center) via atan2, mapping the -90 to 90 degree span onto a 0-4 value
  function angleToValue(clientX, clientY) {
    var r = face.getBoundingClientRect();
    var px = r.left + r.width / 2;
    var py = r.bottom;
    var dx = clientX - px;
    var dy = Math.min(clientY - py, -1); // forces the point above the pivot so the angle doesn't jump at the left boundary
    var theta = Math.atan2(dy, dx) * 180 / Math.PI; // -180..0
    var t = (theta + 180) / 180;
    t = Math.max(0, Math.min(1, t));
    return t * 4;
  }

Where values change the UI — tier count, hue-angle spacing, spring damping

03 — SPRING_D

This constant is the damping term in springTo's force equation (force = -SPRING_K*(pos-target) - SPRING_D*vel) — not the spring's stiffness, just how fast the oscillation it produces dies out once the handle starts overshooting.

07 — HUE_SPACING

This is the degree step badgeHue(i) adds per tier index before wrapping at 360 — not the starting hue itself, just how far apart each badge's color sits from its neighbor's.

06 — TRAIL_LERP

This is the fraction of the remaining distance loop() closes every single frame in ringX += (targetX - ringX) * TRAIL_LERP — not the ring's final position, just how quickly it catches up to a new target once one is set.

Variant Changed value What it feels like
SPRING_D 18 → 26 Spring damping rises from 18 to 26 Against the same SPRING_K=210, oscillation dies out faster, so the slider handle overshoots its tier less and settles more calmly
HUE_SPACING 46 → 64 Hue-angle spacing grows from 46 to 64 The five badgeHue(i) outputs spread further apart around the color wheel, making the badges easier to tell apart at a glance
TRAIL_LERP 0.18 → 0.10 Focus-ring inertia lerp shrinks from 0.18 to 0.10 The ring closes less of the remaining gap each frame, so it trails toward the new tier more slowly and smoothly

Where it breaks — accessibility, reduced-motion, keyboard focus

All nine patterns share the same baseline: each option is a real button with role="radio" or role="slider" (03, 04, 08, 09 use role="slider"/role="spinbutton" since they carry a continuous or steppable value), aria-checked or aria-valuenow/aria-valuetext kept in sync on every paint, and tabindex managed so only the active option sits in the normal Tab order. Arrow keys move the tier in every one of the nine, and matchMedia('(prefers-reduced-motion: reduce)') gates the calculation layer itself, not just a CSS transition — a demo-only difference from the dual range slider set (see the dual range slider piece), since here the reduced check sits inside the animation function that a real keyboard or pointer interaction calls too.

  • 01 — paintUpTo still runs on click, but the autoplay setInterval is never created when reduce is true, so the demo starts on its default tier and stays there without cycling.
  • 02 — same as 01: the CSS transition on box-shadow/transform is untouched by the media query, but autoplay is skipped, so only a real click or arrow key ever changes the shadow.
  • 03 — the one exception with the calculation itself gated: springTo skips the spring loop entirely and jumps pos straight to target, so a reduced-motion visitor never sees the overshoot, only an instant snap to the tier.
  • 04 — sweep returns immediately after setting the gloss band's opacity to 0, so the sweeping highlight never plays at all, reduced or not, while fill's width still transitions in CSS.
  • 05 — morphTo sets currentR straight to the target radii and skips the requestAnimationFrame loop, so the icon jumps to its new shape with no in-between polygon.
  • 06 — moveRingTo sets ringX/ringW straight to their targets and skips loop, so the focus ring jumps to the newly selected option instead of trailing behind it.
  • 07 — like 01 and 02, the hue-formula colors and their CSS transition are unaffected; only the autoplay cycling is skipped.
  • 08 — the digit strips' CSS transition is untouched; the odometer still visually rolls on a real +/- press even with reduced motion set, since this pattern's autoplay is the only thing skipped.
  • 09 — the needle's rotation and zone highlight always update instantly on drag regardless of the setting, since a real drag gesture has no separate "reduced" path to begin with — only the autoplay sequence is skipped.

Reading through the zip end to end, unlocked with the password m4ceuurv, is the fastest way to see exactly which pattern gates its calculation function versus its CSS transition, since all nine style sheets and scripts sit side by side inside it.

Three variants and accessibility

The table above already lists the three confirmed variants — SPRING_D, HUE_SPACING, and TRAIL_LERP — each swapping exactly one constant while every listener, aria-* attribute, and reduced-motion gate stays the same as the base pattern it came from. Because each variant is the same index.html as its base pattern with only that one constant edited, the keyboard handling and accessibility behavior documented above apply to all three unchanged — nothing in that layer needs to be re-verified per variant.

Where can I find difficulty picker ui examples?

Most difficulty picker codepen searches turn up either a plain radio-button group with a few CSS classes swapped, or a game-specific plugin that assumes a particular engine. The nine patterns above sit between those two extremes: plain buttons or a slider role, plain click/keydown/pointer listeners, and one small named calculation function apiece, all in the zip above ready to paste into a settings screen. Game difficulty settings are the most obvious real-world use for this shape, but the same click-or-drag-then-calculate structure works just as well for a survey's felt-difficulty picker, a quiz score input, or any small set of ordered tiers. None of the nine pull in a slider component library or a CDN script to get there — the whole point of keeping each pattern to one small function is that this picker reads start to finish in the code section above instead of asking you to trust an opaque bundle.

FAQ

Why does pattern 06 have the highest average intensity of the nine?

06's requestAnimationFrame loop keeps calling paintRing every single frame it's still catching up to a new target, and each call touches both a translateX and a width on the ring element at once — two properties repainted together, every frame of the catch-up, for as long as TRAIL_LERP needs to close the gap.

Does pattern 03's spring overshoot ever push the slider past a valid tier?

No — springTo only animates pos, the on-screen pixel position the handle is drawn at; the underlying tier value it reports through aria-valuenow and aria-valuetext is set the instant a drag ends or an arrow key is pressed, before the spring even starts. So a viewer can watch the handle visually overshoot for a few frames while the reported value has already settled.

Is a picker built this way safe to drop into a real settings screen?

The click/keydown listeners, the aria-checked/aria-valuenow sync, and the tier-index math transfer directly — swap the demo's autoplay setInterval for whichever real setting your app already stores the difficulty in, and the rest of each function needs no changes. The one thing every pattern here skips on purpose is persisting the choice, so add that save step yourself before shipping it.

Sources: MDN — role="radiogroup" · MDN — role="slider" · MDN — Pointer events · MDN — prefers-reduced-motion · MDN — conic-gradient()

Related reading: 9 Segmented Control UI Patterns — Copy-Paste · Star Rating UI: 9 Interactive Rating Patterns · 9 Date Range Picker UI Patterns — Copy-Paste

Enter the archive password

The password is inside this article. You will find it as you read.