Ultracode slider

Playground#

Change a prop and the component re-renders. Props marked remounts set an initial value, so the component starts over.

<EffortSlider defaultValue="ultracode" recommended="medium" lang="en" />

Installation#

pnpm dlx shadcn@latest add @lumesec/effort-slider

pnpm dlx shadcn@latest registry add @lumesec=https://elements.lumesec.ai/r/{name}.json

npx shadcn@latest add https://elements.lumesec.ai/r/effort-slider.json

Usage#

import { EffortSlider } from "@/components/lumesec/effort-slider";

export function Example() {
  return <EffortSlider defaultValue="ultracode" recommended="medium" />;
}

Behaviour#

An effort picker with six levels. Every level is a plain slider stop until the last one: at Ultracode a pixel trail grows from the thumb toward the left, light pulses run along it and a burst fires on arrival.

The label rolls like a picker wheel in the direction of the change. Dragging snaps on a slightly underdamped spring.

API reference#

Props#

Also accepts every prop of <div> (React.ComponentProps<"div">), spread onto the root element.

Ref#

ref points at the root HTMLDivElement.

Keyboard#

Accessibility#

• The track has role="slider", tabIndex={0}, aria-valuemin={0}, aria-valuemax={5}, aria-valuenow set to the level index and aria-valuetext set to the level name. While dragging they follow the level under the pointer.
• The track's aria-label is "Effort", or "Aufwand" in German.
• Pressing on the track moves focus to it.
• The help button is a native button with aria-label "About effort" and aria-expanded; it shows or hides an explanatory note.
• The rolling level name, the Faster and Smarter end labels and the Recommended caption are aria-hidden; the level is exposed through aria-valuetext. Both canvases are aria-hidden.
• With disabled, the track gets aria-disabled="true" and tabIndex={-1}, and the help button is disabled.
• Reduced motion: the thumb jumps without the spring, the level name swaps without rolling, the shimmer and glow stop, and the Ultracode trail appears at full length without pulses, twinkle or the arrival burst.

Theming#

Styled with Tailwind classes on your shadcn theme tokens, so light and dark follow your theme. The accent comes from --lumesec. See Theming.

This component reads --lumesec, --lumesec-glint, --card, --border, --foreground, --muted and --muted-foreground.

Notes#

• The six levels are fixed. EFFORT_LEVELS exports them as { id, en, de }; xhigh is labelled "Extra".
• The help note text is built in and mentions Claude; it is not configurable.
• The slider is 248px wide by default, with max-width: 100%. Pass a width class (className="w-full") to change it.
• The trail and its sparks are drawn on canvases from the theme tokens and redraw when the theme changes. The lattice grey is mixed from --muted-foreground and --card. The thumb is white in both themes.
• The animation loop pauses while the slider is off screen.