Slider

Preview

Single value and scrubber

Hover or focus to reveal the handle and tick marks. Drag beyond either end for a small elastic stretch; the value stays within its bounds. The handle softens near the inline label and value to keep them readable.

Range, steps and marks

Installation

$ pnpm dlx shadcn@latest add https://ui.ketyap.me/r/slider.json

Usage

Copyimport { Slider } from "@/components/ui/slider";
 
<Slider
  label="Price"
  defaultValue={[20, 70]}
  min={0}
  max={100}
  step={5}
  size="compact"
/>;

API Reference

value / defaultValue: number or an array for a range. onValueChange uses the Base UI callback. min, max, step, disabled, and form props follow Base UI. label names the slider (default Value). variant: comfortable (default) or scrubber. size: default or compact, otherwise inherited. marks: numbers or { value, label } objects. tooltip defaults to true. Use arrow keys, Home/End and Page Up/Down. Step snapping, pointer capture and keyboard interaction are provided by Base UI. When marks is omitted, subtle step or decile ticks appear during interaction. Reduced motion disables the elastic stretch.

The edge feedback and quiet handle treatment are inspired by Elastic Slider, using Ketyap UI’s existing color, shape, size and motion foundations.