RangeSlider

Built on Radix Slider for correct keyboard and screen reader behaviour. Each thumb gets its own label, and values are formatted through one callback.

import { useState } from 'react';
import { RangeSlider } from '@andrewbehma/glass-ui';

Playground

RangeSlider.tsx

import { useState } from 'react';
import { RangeSlider } from '@andrewbehma/glass-ui';

function Example() {
  const [range, setRange] = useState([120, 380]);
  return (
    <div className="grid w-full max-w-80 gap-3">
      <p className="text-label text-ink-2">
        Price: ${range[0]} to ${range[1]}
      </p>
      <RangeSlider
        value={range}
        onValueChange={setRange}
        min={0}
        max={500}
        step={10}
        thumbLabels={['Minimum price', 'Maximum price']}
      />
    </div>
  );
}