ss
0.65
Chip
Min
Max
Step

Install

$  @sethihq/scrub-slider

Then copy slider.tsx, use-sound.ts, and use-haptics.ts into your project.

Usage

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

<Slider
  label="Frequency"
  value={frequency}
  onValueChange={setFrequency}
  min={0}
  max={1}
  step={0.01}
/>

Updates live as you change parameters above.

Props

value*
numberCurrent value
onValueChange*
(v: number) => voidChange handler
min*
numberMinimum value
max*
numberMaximum value
step*
numberStep increment

CSS Tokens

Custom Properties
:root {
  --surface: #ffffff;           /* Track background */
  --on-surface: #0a0a0a;        /* Thumb indicator  */
  --on-surface-muted: #737373;  /* Label, fills     */
  --outline: #e5e5e5;           /* Track border     */
  --chip: #a3a3a3;              /* Hover chip bg    */
  --on-chip: #fafafa;           /* Hover chip text  */
}