Slider

A native range input with a glass thumb that swells while dragged. Keyboard, form submission and step snapping come from the platform.

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

Playground

Slider.tsx

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

function Example() {
  const [volume, setVolume] = useState(64);
  return (
    <div className="grid w-full max-w-72 gap-2">
      <div className="flex justify-between text-label text-ink-2">
        <span>Volume</span>
        <output>{volume}%</output>
      </div>
      <Slider
        aria-label="Volume"
        min={0}
        max={100}
        value={volume}
        onChange={(event) => setVolume(Number(event.target.value))}
      />
    </div>
  );
}