1

Fader

A mixing-console-style parameter fader where the control IS the display — label and value live inside the track, the fill edge is the reading, and a thin bar rides the edge as the grab signifier. Supports continuous and detent (snappy) value grammars, elastic overdrag, and spring-animated settle.

Dependencies

@base-ui/reactmotion

Interaction Type

Click or drag the track to change the value. Use arrow keys for keyboard control. PageUp/PageDown for large steps.

Props

Options you can pass to customize this component.

Prop
Type
Description
label*
string

Accessible name; also used to attribute dev-time warnings.

value*
number

Controlled value for the slider.

onValueChange*
(value: number) => void

Called with the new value whenever it changes.

min
number

Minimum value. Defaults to 0.

max
number

Maximum value. Defaults to 100.

step
number

Step increment. Defaults to 1.

unit
string

Spoken after the value via aria-valuetext (e.g. "%").

points
number[]

Snap-points grammar: pointer input only ever lands on these values. Omit for continuous.

size
smmdlg

Size variant. Defaults to "md".

tone
accentneutral

Color tone. Defaults to "accent".

bordered
boolean

Hairline input outline for busy surfaces.

disabled
boolean

Disables the fader.

className
string

Extra classes merged onto the root element.

Installation

npx shadcn@latest addhttps://ui.nexvyn.dev/r/fader.json

How to use

import { Fader } from "@/components/ui/fader"

export function Demo() {
  const [value, setValue] = useState(65)

  return (
    <Fader
      label="Volume"
      value={value}
      onValueChange={setValue}
      min={0}
      max={100}
      unit="%"
      size="md"
      tone="accent"
    />
  )
}

Source Code

Click the code icon in the top-right corner to view the source code.

Contact

Questions or feedback? Reach out anytime.

License & Usage

  • •Free for personal and commercial use
  • •No attribution required
  • •Cannot be resold as a standalone product
  • •Anatomy/blueprint diagrams are licensed separately (CC BY-NC 4.0) and are not for commercial use
// No code loaded.
npx shadcn@latest addhttps://ui.nexvyn.dev/r/fader.json