Forms

Range slider

Choose a value or a min–max range, optionally over a distribution.

import { RangeSlider } from '@jsonresume/ui'Source(opens in a new tab)

Examples

Salary range over listingsBars show how many jobs fall in each bucket.

Salary$120k – $220k

Show code

range-slider/salary.tsx

'use client';

import { RangeSlider } from '@jsonresume/ui';
import * as styles from './salary.css';

// Counts of job listings per $25k bucket, drawn behind the slider.
const listings = [2, 5, 11, 19, 28, 31, 24, 16, 9, 5, 3, 1];

export default function RangeSliderSalary() {
  return (
    <div className={styles.root}>
      <RangeSlider
        label="Salary"
        min={0}
        max={300}
        step={5}
        defaultValue={[120, 220]}
        formatValue={(v) => `$${v}k`}
        distribution={listings}
      />
    </div>
  );
}

range-slider/salary.css.ts

import { style } from '@vanilla-extract/css';

export const root = style({ width: 'min(100%, 26rem)' });

Single value

Minimum match70%

range-slider/single.tsx

'use client';

import { RangeSlider } from '@jsonresume/ui';
import * as styles from './single.css';

export default function RangeSliderSingle() {
  return (
    <div className={styles.root}>
      <RangeSlider
        label="Minimum match"
        defaultValue={[70]}
        formatValue={(v) => `${v}%`}
      />
    </div>
  );
}

range-slider/single.css.ts

import { style } from '@vanilla-extract/css';

export const root = style({ width: 'min(100%, 20rem)' });

Accessibility

Each thumb is a slider with a name and a formatted aria-valuetext ("$120k").
Arrow keys step; Page Up/Down and Home/End jump.

Props

Also accepts the attributes of the element RangeSlider renders.
Prop	Type	Default	Description
label required	string	–	Visible label.
className	string	–
defaultValue	number[]	–
disabled	boolean	–
distribution	number[]	–	Optional counts across the range, drawn as bars behind the slider.
formatValue	((value: number) => string)	–	Formats values for display and for screen readers.
max	number	100
min	number	0
onValueChange	((value: number[]) => void)	–
onValueCommit	((value: number[]) => void)	–	Fires when dragging ends.
step	number	1
thumbLabels	[string, string]	['Minimum', 'Maximum']	Accessible names for the two thumbs of a range.
value	number[]	–	One value for a single thumb, two for a range.