Slider

import { useState } from 'react';
import { Slider } from '@components-kit/react';

const saveToServer = (value: number) => {
  console.log('Committed slider value:', value);
};

// Basic slider with external label
<label id="volume-label">Volume</label>
<Slider aria-labelledby="volume-label" defaultValue={50} />

// With aria-label (no visible label)
<Slider aria-label="Volume" defaultValue={50} />

// Controlled slider
function VolumeSlider() {
  const [volume, setVolume] = useState(50);

  return <Slider aria-label="Volume" value={volume} onValueChange={setVolume} />;
}

// With onValueCommit (fires only when drag ends)
<Slider aria-label="Volume" defaultValue={50} onValueCommit={(v) => saveToServer(v)} />

// Custom range and step
<Slider aria-label="Temperature" min={0} max={40} step={0.5} defaultValue={22} />

// Vertical slider
<Slider aria-label="Volume" defaultValue={50} orientation="vertical" />

// Disabled slider
<Slider aria-label="Locked" defaultValue={30} disabled />

// With variant
<Slider aria-label="Brightness" defaultValue={75} variantName="primary" />

// With human-readable value text
<Slider
  aria-label="Priority"
  aria-valuetext="Medium priority"
  min={1}
  max={5}
  step={1}
  value={3}
/>