ComponentsForms & inputs

Slider

Choose a number or a range by dragging: a price filter, a salary band, deal probability, image opacity. Marks, a value bubble, synced number inputs, and Intl formatting with the provider locale.

Radix Slider components/slider.tsx, components/input.tsx, lib/locale.tsxtheme · material · accent · density · font

Used to weight this deal in the revenue forecast.

Installation

$ pnpm add @vamos-ui/react

The whole kit as one package — get updates by bumping the version. Add the styles to globals.css: @import "@vamos-ui/react/styles.css";

Usage

import { Field, Slider } from "@vamos-ui/react";

<Field label="Price per night">
  <Slider
    defaultValue={[120, 340]}
    min={40}
    max={600}
    step={10}
    formatOptions={{ style: "currency", currency: "USD", maximumFractionDigits: 0 }}
    withInputs
  />
</Field>

Keyboard: arrows ± step, Page Up / Page Down ± 10 steps, Home / End to the bounds. aria-valuetext carries the formatted value ("$120", "₺1.250").

In server components pass formatOptions, not formatValue — functions can't cross into client components.

Examples

Range with inputs

Two values = range. Thumbs are named "Price per night Minimum / Maximum"; typed values are snapped to step and can't cross. names gives each thumb its own form field.

Marks

Numbers or { value, label }. showValue="always" pins the bubble; "never" hides it when the marks already say it.

Snaps to the five levels in your career framework.

Filter on release

onValueChange for the live preview, onValueCommit to filter or call the server once per gesture.

3 of 6 stays · $100–$3000 requests
  • Moda loft with sea view$145
  • Karaköy design flat$210
  • Balat townhouse$132

Sizes & states

Small, disabled, read-only, a Field error and vertical orientation.

Set by your manager.

Discounts above 40% need approval.

API

Slider

PropTypeDefault
value / defaultValue
One number = single, two = range.
number[][min]
onValueChange
Continuously while dragging.
(value: number[]) => void—
onValueCommit
On release / key up — wire filters here.
(value: number[]) => void—
min / max / step
Bounds and step.
number0 / 100 / 1
minStepsBetweenThumbs
Minimum gap in a range.
number0
marks
Ticks under the track; labels optional.
(number | { value, label })[]—
formatOptions
Formatting with the provider locale (currency, percent, unit).
Intl.NumberFormatOptions—
formatValue
Custom formatter (client components only). Wins over formatOptions.
(n: number) => string—
showValue
Value bubble above the thumb (hover, focus and drag).
"never" | "hover" | "always""hover"
withInputs
Number inputs under the track, commit on blur / Enter.
boolean—
size
Track and thumb size.
"sm" | "md""md"
orientation
Vertical needs a height on the parent.
"horizontal" | "vertical""horizontal"
thumbLabels
Accessible name per thumb. Range default: Minimum / Maximum (dictionary slider.*).
string[]—
name
Form name; range values submit as repeated entries (formData.getAll(name)).
string—
names
Separate form names per thumb, e.g. ["priceMin", "priceMax"].
string[]—
invalid / readOnly / disabled / required
State; inherited from Field.
boolean—
labels
Built-in string overrides.
Partial<{ min, max, value }>—
Previous
SLA timer
Next
Slug input