Docs·Elastic Slider

Elastic Slider

An inset control with embedded labels, contextual hash marks, a dodging handle, rubber edges, and precise pointer or keyboard input.

Installation

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

Usage

API Reference

PropTypeDefault
valueControlled slider value.
number—
defaultValueInitial uncontrolled value.
number—
onValueChangeCalled when pointer or keyboard interaction changes the value.
(value: number) => void—
minMinimum value.
number0
maxMaximum value.
number1
stepIncrement used for snapping and keyboard input.
number0.01
labelVisible and accessible slider label.
string—
formatValueFormats the visible value and accessible value text.
(value: number) => stringString
disabledDisables pointer and keyboard interaction.
booleanfalse

Click on the icon in the top right of the example preview to view the source code for specific variants.

Keep in mind

This component is inspired by various open-source projects and patterns. Please verify licenses and implementation details before using in production.

Have any questions?
Contact on@ctrlcat0x
Noise0%
Saturation100%
Background blur0px
import { ElasticSlider } from "@/components/ui/elastic-slider"
export function NoiseControl() {
  const [noise, setNoise] = useState(0)

  return (
    <ElasticSlider
      label="Noise"
      value={noise}
      onValueChange={setNoise}
      min={0}
      max={100}
      step={1}
      formatValue={(value) => `${value}%`}
    />
  )
}