Slider

Single-thumb slider built on React Aria; supports marks, value readout, and locale-aware formatting.

stable
since v0.1.0
1.1 kB
forms

Preview

tsx

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

export default function Example() {
  return (
    <div style={{ width: '320px' }}>
      <Slider label="Volume" defaultValue={50} minValue={0} maxValue={100} showValue />
    </div>
  );
}

Sizes

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

Preview

Open

tsx

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

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

With value

Set showValue to render the current value in the header.

Preview

Open

tsx

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

export default function Example() {
  return (
    <div style={{ width: '320px' }}>
      <Slider label="Brightness" defaultValue={64} minValue={0} maxValue={100} showValue />
    </div>
  );
}

Step

Use step to constrain motion to discrete increments.

Preview

Open

tsx

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

export default function Example() {
  return (
    <div style={{ display: 'flex', flexDirection: 'column', gap: '1rem', width: '320px' }}>
      <Slider label="By 5" defaultValue={25} minValue={0} maxValue={100} step={5} showValue />
      <Slider label="Decimal" defaultValue={0.5} minValue={0} maxValue={1} step={0.05} showValue />
    </div>
  );
}

Marks

Pass an array of { value, label } to render tick marks beneath the track.

Preview

Open

tsx

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

export default function Example() {
  return (
    <div style={{ width: '320px' }}>
      <Slider
        label="Tier"
        defaultValue={50}
        minValue={0}
        maxValue={100}
        step={25}
        showValue
        marks={[
          { value: 0, label: 'Free' },
          { value: 25, label: 'Hobby' },
          { value: 50, label: 'Pro' },
          { value: 75, label: 'Team' },
          { value: 100, label: 'Ent' },
        ]}
      />
    </div>
  );
}

Formatted

Pass formatOptions to format the value as currency, percent, or other units.

Preview

Open

tsx

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

export default function Example() {
  return (
    <div style={{ display: 'flex', flexDirection: 'column', gap: '1rem', width: '320px' }}>
      <Slider
        label="Price"
        defaultValue={499}
        minValue={0}
        maxValue={1000}
        step={10}
        showValue
        formatOptions={{ style: 'currency', currency: 'USD', maximumFractionDigits: 0 }}
      />
      <Slider
        label="Opacity"
        defaultValue={0.6}
        minValue={0}
        maxValue={1}
        step={0.01}
        showValue
        formatOptions={{ style: 'percent' }}
      />
    </div>
  );
}

Disabled

Preview

Open

tsx

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

export default function Example() {
  return (
    <div style={{ width: '320px' }}>
      <Slider label="Locked" defaultValue={40} isDisabled showValue />
    </div>
  );
}

API

PropTypeDefaultDescription

label

ReactNode

—

Visible label rendered above the track. Also used as the thumb's accessible name when a string.

size

"sm"|"md"|"lg"

"md"

Track size.

marks

readonly SliderMark[]

—

Tick marks along the track.

showValue

boolean|"tooltip"

—

Show the current value (or `'tooltip'` to show it on the thumb only).

formatOptions

NumberFormatOptions

—

Intl format options passed to React Aria for locale-aware display. The display format of the value label.

className

string

—

style

CSSProperties

—

Accessibility

The thumb exposes role="slider" with aria-valuemin, aria-valuemax, and aria-valuenow.
Arrow Left/Right (or Up/Down) move by step; Page Up/Down move by a larger increment; Home/End jump to bounds.
When label is a string it is forwarded as aria-label on the thumb.
Always provide a label or aria-label so the slider’s purpose is announced.

Recipes

Use whole-number step for counts; fractional step for percentages or weights.
Pair showValue with formatOptions to keep the readout consistent across locales.
Use marks to surface meaningful waypoints (e.g. tier breakpoints) along the track.