Skip to component
Modulo

Elastic slider

A bounded slider with elastic endpoint stretch, rigid content, and interruptible settling.

View fullView source

Preview

Elastic Slider

Horizontal
Level

Controls

Value
65

Drag past either end. Arrow keys adjust the value. Release to commit.

Installation

bunx shadcn@latest add @modulo/elastic-slider

Requires an active Modulo key and a project configured for shadcn.

Registry setup

Set MODULO_REGISTRY_KEY to your key. Add this registry entry to components.json.

{
  "registries": {
    "@modulo": {
      "url": "<registry-url>/r/{name}.json",
      "headers": {
        "Authorization": "Bearer ${MODULO_REGISTRY_KEY}"
      }
    }
  }
}

Usage

import { ElasticSlider } from "@/components/elastic-slider/ElasticSlider";

export default function Example() {
  return <ElasticSlider label="Brightness" defaultValue={65} orientation="vertical" />;
}

React and scoped CSS. No animation package required.

Registry JSONDownload thumbnailDownload preview GIFDownload preview video

Interaction

Drag horizontally or vertically. The value stays within its bounds while the shell stretches at either end. Labels, content, and input targets keep their shape.

Arrow keys adjust one step. Page Up and Page Down adjust ten steps. Home and End select the bounds. Step rounding starts at the minimum.

Changes arrive during adjustment. A successful pointer release or keyboard release commits the requested value. Cancellation settles the shell without a commit. Controlled values remain owned by the parent.

Reduced motion preserves value adjustment without elastic stretching. Preference changes, hidden tabs, and unmounting stop pending animation and replay.

API

PropTypeDefault
labelVisible and accessible name for the value.stringRequired
value / defaultValueUse value with onValueChange for controlled state, or defaultValue for local state.numbermin
min / maxFinite ordered semantic bounds.number0 / 100
stepValue increment counted from min, or continuous pointer values with any.number | "any"1
orientationInput direction and shell layout."horizontal" | "vertical""horizontal"
disabledBlocks pointer and keyboard changes.booleanfalse
reducedMotionRequests a still alternate path. The system preference also applies.booleanfalse
onValueChangeBounded normalized value requests. Required with controlled value.(value: number) => voidOptional
onValueCommitSuccessful user adjustment. Cancellation does not commit.(value: number) => voidOptional
formatValueFormats the displayed and accessible value.(value: number) => stringOptional
childrenRigid decorative content outside shell deformation.ReactNodeOptional
onReadyController on mount and null on cleanup. Keep callback stable.(controller | null) => voidOptional
Controller methods

update(options) updates the existing instance. snapshot() reports accepted value, pending proposal, raw and rendered stretch, velocity, gesture phase, and runtime status.

replay() runs finite simulated input for media. User input cancels it. destroy() releases the instance's listeners, observers, timers, and frames. React calls it on unmount.

Source

Checking source access...