RangeSlider

Two-thumb slider for picking a numeric range; built on React Aria's Slider.

stable
since v0.1.0
1.1 kB
forms

Preview

tsx

import { RangeSlider } from '@arshad-shah/cynosure-react';

export default function Example() {
  return (
    <div style={{ width: '320px' }}>
      <RangeSlider
        label="Price range"
        defaultValue={[20, 80]}
        minValue={0}
        maxValue={100}
        showValue
      />
    </div>
  );
}

Sizes

Three track sizes are available: sm, md (default), and lg.

Preview

Open

tsx

import { RangeSlider } from '@arshad-shah/cynosure-react';

export default function Example() {
  return (
    <div style={{ display: 'flex', flexDirection: 'column', gap: '1rem', width: '320px' }}>
      <RangeSlider size="sm" label="Small" defaultValue={[20, 60]} />
      <RangeSlider size="md" label="Medium" defaultValue={[20, 60]} />
      <RangeSlider size="lg" label="Large" defaultValue={[20, 60]} />
    </div>
  );
}

With label and value

Set label for a visible caption and showValue to render the formatted range next to it.

Preview

Open

tsx

import { RangeSlider } from '@arshad-shah/cynosure-react';

export default function Example() {
  return (
    <div style={{ width: '320px' }}>
      <RangeSlider
        label="Budget"
        defaultValue={[200, 800]}
        minValue={0}
        maxValue={1000}
        step={50}
        showValue
      />
    </div>
  );
}

Step

Use step to constrain motion to discrete increments.

Preview

Open

tsx

import { RangeSlider } from '@arshad-shah/cynosure-react';

export default function Example() {
  return (
    <div style={{ width: '320px' }}>
      <RangeSlider
        label="Volume window"
        defaultValue={[10, 30]}
        minValue={0}
        maxValue={50}
        step={5}
        showValue
      />
    </div>
  );
}

Formatted

Pass formatOptions to render currency, percent, or unit-aware values.

Preview

Open

tsx

import { RangeSlider } from '@arshad-shah/cynosure-react';

export default function Example() {
  return (
    <div style={{ display: 'flex', flexDirection: 'column', gap: '1rem', width: '320px' }}>
      <RangeSlider
        label="Price (USD)"
        defaultValue={[250, 750]}
        minValue={0}
        maxValue={1000}
        step={10}
        showValue
        formatOptions={{ style: 'currency', currency: 'USD', maximumFractionDigits: 0 }}
      />
      <RangeSlider
        label="Opacity"
        defaultValue={[0.2, 0.8]}
        minValue={0}
        maxValue={1}
        step={0.05}
        showValue
        formatOptions={{ style: 'percent' }}
      />
    </div>
  );
}

Disabled

Preview

Open

tsx

import { RangeSlider } from '@arshad-shah/cynosure-react';

export default function Example() {
  return (
    <div style={{ width: '320px' }}>
      <RangeSlider label="Locked range" defaultValue={[30, 70]} isDisabled showValue />
    </div>
  );
}

API

PropTypeDefaultDescription

label

ReactNode

—

Visible label rendered above the track.

size

"sm"|"md"|"lg"

"md"

Track size.

showValue

boolean

—

Renders the current `[start, end]` pair beside the label.

formatOptions

NumberFormatOptions

—

Intl format options for locale-aware display. The display format of the value label.

className

string

—

style

CSSProperties

—

value

[number, number]

—

defaultValue

[number, number]

—

onChange

((value: [number, number]) => void)

—

Accessibility

Each thumb exposes role="slider" with aria-valuemin, aria-valuemax, and aria-valuenow.
Arrow Left/Right (or Up/Down) move the focused thumb by step; Page Up/Down move by a larger increment.
Home/End jump to the bounds; thumbs cannot cross each other.
When label is a string, both thumbs receive descriptive aria-labels ({label} (min) / {label} (max)).

Recipes

Use for price ranges, numeric filters, or date windows where both ends matter.
Provide formatOptions for localized currency or percent rendering.
Combine with helper text below the slider to describe the unit when not implied by formatOptions.