Elastic Slider

Slider with elastic rubber-band drag and magnetic snap feedback.

Loading…

"use client"
 
import { useState } from "react"
 
import { ElasticSlider } from "@/components/elastic-slider"
 
export default function ElasticSliderDemo() {
  const [opacity, setOpacity] = useState(0.5)
 
  return (
    <div className="flex w-50 flex-col gap-4">
      <ElasticSlider
        label="Opacity"
        min={0}
        max={1}
        value={opacity}
        onValueChange={setOpacity}
      />
 
      <ElasticSlider
        label="Blur"
        min={0}
        max={100}
        step={1}
        defaultValue={20}
        formatValue={(v) => `${v}px`}
      />
 
      <ElasticSlider
        label="Saturation"
        min={0}
        max={10}
        step={0.1}
        defaultValue={8}
      />
    </div>
  )
}

Features

Track stretches with rubber-band tension when dragged past bounds.
Snaps magnetically to exact steps or continuous deciles.
Inline label and value text dynamically fade to avoid handle overlap.
Supports keyboard navigation and respects prefers-reduced-motion

Want to craft components with meticulous attention to detail—like an Elastic Slider? I highly recommend the Interface Craft course by Josh Puckett.

Installation

$ pnpm dlx shadcn@latest add @ncdai/elastic-slider

Usage

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

const [opacity, setOpacity] = useState(0.5)
 
<ElasticSlider
  label="Opacity"
  min={0}
  max={1}
  value={opacity}
  onValueChange={setOpacity}
/>

Uncontrolled:

<ElasticSlider label="Opacity" min={0} max={1} defaultValue={0.5} />

Accessibility

Keyboard

Key	Description
`ArrowRight` `ArrowUp`	Increase by one `step`
`ArrowLeft` `ArrowDown`	Decrease by one `step`
`Shift + Arrow`	Increase or decrease by `step*10`
`Home`	Jump to `min`
`End`	Jump to `max`

Reduced motion

When prefers-reduced-motion is on, rubber-band stretch and spring-based fill motion are skipped; the handle still updates without spring transitions on opacity and scale.

API Reference

ElasticSlider

Prop

Type

Styling

CSS Variables

Variable	Meaning
`--elastic-slider-height`	Total height of the control (theme spacing scale).
`--elastic-slider-radius`	Corner radius of the track.
`--elastic-slider-bg`	Track background.
`--elastic-slider-fill`	Fill behind the thumb when the track is idle.
`--elastic-slider-fill-active`	Fill behind the thumb when hovered, keyboard-focused, or dragging.
`--elastic-slider-hash`	Step or decile tick marks when the track is active.
`--elastic-slider-handle`	Thumb color.
`--elastic-slider-label`	Label text color; base tint for the numeric value.
`--elastic-slider-focus`	Numeric value color when the track is active (stronger than the label).

Data Slots

Slot	Description
`elastic-slider`	Root wrapper; CSS variables are defined here.
`elastic-slider-track`	Focusable track, rubber-band width, focus ring.
`elastic-slider-hash-marks`	Container for tick marks.
`elastic-slider-fill`	Filled portion of the track.
`elastic-slider-handle`	Vertical handle.
`elastic-slider-label`	Inline label.
`elastic-slider-value`	Formatted value.

References

Slider in DialKit by Josh Puckett
Creating a Slider Component — Interface Craft course by Josh Puckett

Command Palette