SKXV Blog

A custom range control with squircle corners, animated numeric readout, rubber-band overscroll, and optional in-fill label.

Volume

Installation

Add the Slider and its package dependencies with one command:

pnpx shadcn@latest add https://blog.skxv.dev/r/slider.json

Usage

import { Slider } from "@/components/registry/slider";

<Slider
  value={volume}
  onChange={(event) => setVolume(Number(event.target.value))}
  min={0}
  max={100}
  step={1}
/>;

Forward a ref to receive the hidden native input[type=range] for forms and imperative access.

API Reference

Extends InputHTMLAttributes<HTMLInputElement> except type, value, and defaultValue (numeric).

Prop	Type	Default	Description
`value`	`number`	-	Controlled value. Pair with `onChange`.
`defaultValue`	`number`	-	Initial value when uncontrolled.
`min`	`number`	`0`	Minimum value.
`max`	`number`	`100`	Maximum value.
`step`	`number`	`1`	Step interval for keyboard and snapping.
`label`	`string`	-	Optional label inside the fill. Truncates when narrow.
`prefix`	`string`	`''`	Text shown before the value, such as `$`.
`suffix`	`string`	`''`	Text shown after the value, such as `%` or `px`.
`tickSpacing`	`number`	`15`	Minimum px between visible stepper ticks.
`showTicks`	`boolean`	`true`	Show stepper tick marks along the bottom edge.
`showValue`	`boolean`	`true`	Show the animated numeric readout on the right.
`size`	`'default' \| 'small'`	`default`	Small hides ticks, label, and value. Use `aria-label` for accessibility.
`snapToSteps`	`boolean`	`false`	Tween the fill and readout to each step when crossing detents.
`corners`	`SmoothCornerOptions`	-	Lisse squircle settings.
`disabled`	`boolean`	`false`	Disables interaction.
`readOnly`	`boolean`	`false`	Prevents value changes while keeping focus styles.
`onChange` / `onInput`	`ChangeEventHandler`	-	Standard range input handlers. `event.target.value` is the numeric string.
`className` / `style`	`string` / `CSSProperties`	-	Applied to the interactive track shell. Use `w-full` to grow; min width is `12rem`.

Examples

Default

Uncontrolled slider with default min, max, and step.

Controlled

Use value and onChange for controlled state.

Disabled

Use disabled to disable the slider.

Brightness

Prefix & Suffix

Optional prefix and suffix text before and after the animated value.

Monthly budget

Volume

Tick controlling

Use showTicks to control the visibility of the ticks. The amount of ticks are automatically calculated based on the min, max, step, and tickSpacing props.

Slider width

Tick spacing

Result

Snap to Steps

Use snapToSteps when the fill and readout should animate between discrete detents.

Detented

Minimal

Use showTicks={false} and showValue={false} for a quieter control while keeping the native range input accessible.

Custom Corners

Pass corners to tune the Lisse squircle radius, smoothing, and curve.

Soft corner

Label

Use label to add a label to the slider. The label automatically truncates when the slider is too small.

Slider width

This is an example of a label that is too long and will be truncated

Small

Use size="small" to hide the ticks, label, and value readout, and make the slider smaller.

Read Only

Use readOnly to prevent value changes without removing focus styles.

Locked