Skip to content

Foundations

Range Slider

Single and range sliders with steps, marks and value labels — for temperature, length, budgets.

2 variantsMIT

Preview

Temperature0.7
PreciseBalancedCreative
Max steps12
Top-p0.90

Installation

Copies the component into components/ui and installs its dependencies and theme tokens.

pnpm dlx shadcn@latest add https://tuffui.com/r/range-slider.json

Usage

Pass your own data and wire the callbacks to your agent runtime.

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

<Slider
  label="Temperature"
  value={temperature}
  defaultValue={0.7}
  onValueChange={setTemperature}
  min={0}
  max={2}
  step={0.1}
  format={(v) => v.toFixed(1)}
/>

// Two thumbs: pass a [low, high] pair.
<Slider label="Response length" defaultValue={[150, 600]} max={1000} step={50} striped />

Props

PropTypeDefaultDescription
defaultValue*number | [number, number]—Initial value. A pair renders a range with two thumbs.
valuenumber | [number, number]—Controlled value.
onValueChange(value) => void—Fires while dragging.
onValueCommit(value) => void—Fires when a drag or key press ends.
min / max / stepnumber0 / 100 / 1Range and snapping.
marks{ value; label? }[]—Labels under the track.
stripedbooleanfalseStripes on the fill.
label*string—Accessible name, shown above.
format(value: number) => string—Text for the bubble, the header and aria-valuetext.
disabledbooleanfalseDims and locks it.