Documentation

Scale end lift

The icons at the ends of a scale jump up when the thumb arrives, then settle back down when it leaves. The height is not tied to distance. Closer does not mean taller.

How it works

Two jobs, kept apart.

The first is a step. isAtScaleEnd measures distance from an end as a fraction of the track. Inside the last 5% (SCALE_LIFT_REACH), that mark is up. Outside it, the mark is down. There is no slope between those states. A ramp that grew with proximity is what made an earlier version feel like a 45° line. This target is a square wave: resting, or fully raised.

The second job is the transition, and it has two timings because CSS uses the transition on the state you are entering.

1.scale-end-mark {2  translate: 0 0.25rem;3  transition: translate 500ms cubic-bezier(0.22, 1, 0.36, 1);4}5 6.scale-end-mark[data-lifted] {7  translate: 0 -0.125rem;8  transition: translate 150ms cubic-bezier(0.19, 1, 0.22, 1);9}Language: css

Adding data-lifted plays the short, steep ease-out, so the icon jumps up. Removing it plays the longer ease-out, so the icon drops and settles. Both states sit the same small distance above the track; only the 6px between them moves.

Transition translate, not transform. Utility classes such as Tailwind’s translate-y-* write the separate translate property. A transition that only lists transform never sees the change, and the icon snaps.

A transition starts from the current value. Reverse while the icon is still in the air and it turns around from there, instead of restarting the curve.

Why this works without JavaScript

Nothing interpolates the icon. There is no animation frame and no motion library. The browser runs transition: translate.

A native range input already slides with scripting off. The only script this needs is a flag when the thumb crosses the step. The movement stays in the stylesheet:

1<input type="range" min="0" max="100" value="50" oninput="2  start.toggleAttribute('data-lifted', this.valueAsNumber < 5)3  end.toggleAttribute('data-lifted', this.valueAsNumber > 95)4">Language: html

Leave the handler off and the range still works. The icons stay down until something sets data-lifted — HTML, a render, or that one line. The jump is the same in each case.

prefers-reduced-motion: reduce turns the transition off. The mark changes place at once instead of travelling.

Usage

1import { ScaleEndLift } from '@/components/ui/scale-end-lift';2 3<ScaleEndLift4  label="Height"5  value={value}6  min={0}7  max={100}8  onValueChange={setValue}9/>Language: jsx

Props

• value (number): Current thumb position.
• min / max (number, default 0 / 100): Track ends.
• step (number, default 1): Native range step.
• onValueChange ((value: number) => void): Fired by the range input.
• label (string): Accessible name for the input.
• start / end (ReactNode): Marks at the two ends. Defaults are a house and a tower.