import { Slider } from '@primitivekit/react';

<Slider label="Volume" />

<Slider 
  label="Price Range"
  min={0}
  max={1000}
  defaultValue={500}
/>

<Slider 
  label="Rating"
  min={0}
  max={5}
  step={0.5}
  defaultValue={3.5}
/>

<Slider size="small" label="Small" />
<Slider size="medium" label="Medium" />
<Slider size="large" label="Large" />

<Slider colorScheme="primary" label="Primary" />
<Slider colorScheme="secondary" label="Secondary" />
<Slider colorScheme="success" label="Success" />
<Slider colorScheme="danger" label="Danger" />

<Slider 
  label="Brightness"
  showValue
  min={0}
  max={100}
  defaultValue={75}
/>

<Slider 
  label="Temperature"
  min={0}
  max={100}
  step={25}
  marks={[
    { value: 0, label: '0°C' },
    { value: 25, label: '25°C' },
    { value: 50, label: '50°C' },
    { value: 75, label: '75°C' },
    { value: 100, label: '100°C' },
  ]}
/>

import { useState } from 'react';

function ControlledSlider() {
  const [value, setValue] = useState(50);

  return (
    <div>
      <Slider
        label="Volume"
        value={value}
        onChange={(e) => setValue(Number(e.target.value))}
        min={0}
        max={100}
        showValue
      />
      <p>Current value: {value}</p>
    </div>
  );
}

<Slider 
  label="Price Range"
  range
  min={0}
  max={1000}
  defaultValue={[200, 800]}
/>

<Slider
  label="Custom slider"
  style={{
    '--slider-track-height': '8px',
    '--slider-track-bg': 'rgba(200, 200, 200, 1)',
    '--slider-track-fill-bg': 'rgba(255, 0, 0, 1)',
    '--slider-thumb-size': '24px',
    '--slider-thumb-bg': 'rgba(255, 0, 0, 1)',
  }}
/>