Elastic Slider React Component

LIVE PREVIEWInteract with the component

Just React. No extra dependencies.

Copy the component and its CSS module into your project.

CSS Modules

Usage

Matches your current playground settings.

import ElasticSlider from "./ElasticSlider";

export default function Example() {
  return (
    <ElasticSlider
      defaultValue={64}
      min={0}
      max={100}
      step={1}
      label={"Volume"}
      unit={"%"}
      accentColor={"#dcc5f2"}
      trackColor={"#ffffff24"}
      elasticity={0.35}
      showValue={true}
      disabled={false}
    />
  );
}

Using Elastic Slider

Set min, max, and step for the values your application accepts. Use label and unit to explain the number being adjusted.

Pair value with onChange for a controlled slider, or use defaultValue for local state. elasticity changes the visual response without changing the allowed range.

Props

Name	Type	Required	Default	Description
value	number	No	undefined	Optional controlled numeric value.
defaultValue	number	No	50	Initial value when uncontrolled.
onChange	function	No	undefined	Called with the new numeric value. Native range keyboard controls are supported.
min	number	No	0	Minimum value.
max	number	No	100	Maximum value. A max at or below min disables the slider.
step	number	No	1	Native range step size.
label	string	No	""	Visible and accessible field label.
unit	string	No	""	Suffix shown with the current value.
accentColor	string	No	"#d6c4f2"	Filled track and thumb colour.
trackColor	string	No	"#ffffff24"	Unfilled track colour.
elasticity	number	No	0.35	Vertical drag multiplier, with displacement capped at 18 pixels.
showValue	boolean	No	true	Display the current value beside the label.
disabled	boolean	No	false	Disable user input.
className	string	No	""	Additional CSS classes, merged with the component styles.
style	CSSProperties	No	undefined	Inline styles for caller-defined sizing and visual overrides.