Pro

Elastic slider

A slider with give. Drag past either end and the track stretches toward your finger, the end icon leans with it, and both spring back when you let go. The value is always clamped; only the drawing stretches.

Pro

pnpm dlx shadcn@latest add @caliper/elastic-slider

Reading view

Applies on this device only.

Brightness

Zoom

Installs components/ui/elastic-slider.tsxDepends on none beyond ReactMotion none in component source

When to use

Use it for

Volume, brightness, zoom and other values where the ends matter.
Touch-first controls where a hard stop feels dead.

Skip it when

Precise numeric entry; pair a number field or use the scrub field.
Ranges with two thumbs; use the range slider.

Decisions

Why it is built this way, so you know what to keep when you change your copy.

Behaviour

Resistance, not a wall: Past the end the stretch follows a curve that keeps giving less and stops near 18px, the way a rubber band does.
Keys feel the end too: Pressing on at an end gives one small stretch, so keyboard users get the same signal as a drag.

Styling

No thumb: The filled rail is the value and grows thicker while held. Without a thumb nothing sits under the finger to hide it.

Installation

terminal

pnpm dlx shadcn@latest add @caliper/elastic-slider

Adds its 4 files to components/ui/, each with its own stylesheet, and installs their packages. Pro installs with your access token, set up once per project. See Pro access. The first part also adds Caliper UI’s tokens; import them once as in Installation.

Usage

Import it from your copy of the source. The example behind the preview comes with the source. It is built from ElasticSlider and rubberBand.

example.tsx

import { ElasticSlider, rubberBand } from "@/components/ui/elastic-slider"

The worked example comes with Pro

The 29-line example behind the preview opens here, ready to copy.

576 Pro parts, blocks and page templates, all with source
$199 once, with a year of updates. What you have stays yours
A full refund within 14 days if it is not for you

Checking your licence…

API reference

ElasticSlider

component

PropTypeDefaultDescription

label *string—

value *number—

onValueChange *(value: number) => void—

minnumber0

maxnumber100

stepnumber1

startIconReactNode—

endIconReactNode—

format((value: number) => string)(v) => String(v)The visible and spoken value, such as "40%".

classNamestring—

rubberBand

component

No props of its own; it accepts the native props of its root element.

It exposes slider semantics, with aria-hidden, aria-label, aria-valuemin, aria-valuemax, aria-valuenow and aria-valuetext kept in step with state.

KeyBehaviour

HomeJumps to the first item or the minimum.

EndJumps to the last item or the maximum.

Motion

It declares no animation in its component source. Any transition comes from its stylesheet, which uses the duration tokens that collapse to instant under prefers-reduced-motion.