RangeSlider

A slider with two thumbs for picking a range.

Import

ts
import { RangeSlider } from '@k8ordo/ui';

Usage

tsx
<RangeSlider aria-label="Price" defaultValue={[20, 80]} />

Controlled

18–26 °C

tsx
const [value, setValue] = useState<readonly [number, number]>([18, 26]);

<RangeSlider
  aria-label="Temperature"
  max={40}
  min={0}
  onChange={setValue}
  value={value}
/>

Disabled

tsx
<RangeSlider aria-label="Price" defaultValue={[20, 80]} disabled />

In a form

Each thumb is a real <input type="range"> and submits as one of the two fields named by the name pair. Uncontrolled, the values stay in the DOM, so a form’s reset and its dirty check work on them as on any input.

tsx
// schema.ts
export const filterSchema = z.object({
  priceMin: z.coerce.number().int().min(0).max(100),
  priceMax: z.coerce.number().int().min(0).max(100),
});

// filter-form.tsx
const priceMin = form.field('priceMin');
const priceMax = form.field('priceMax');

<FormControl
  label="Price"
  renderInput={(props) => (
    <RangeSlider
      {...props}
      defaultValue={[20, 80]}
      max={100}
      min={0}
      name={[priceMin.input.name, priceMax.input.name]}
    />
  )}
/>

Props

defaultValue?
Type: readonly [number, number]
Default: -
disabled?
Type: boolean
Default: false
invalid?
Type: boolean
Default: false
max?
Type: number
Default: 100
min?
Type: number
Default: 0
name?
Type: readonly [string, string]
Default: -
onChange?
Type: (value: [number, number]) => void
Default: -
ref?
Type: Ref<HTMLDivElement>
Default: -
required?
Type: boolean
Default: false
step?
Type: number
Default: 1
value?
Type: readonly [number, number]
Default: -

Type base (some attrs are managed internally): HTMLAttributes<HTMLDivElement>

Wording this component renders (labels, placeholders, and the like) comes from the message dictionary when no prop sets it. To change it, see: i18n

Components