Slider

import { useState } from 'react';
import { Slider } from '@arbol-ai/ui';

const SpeedExample = () => {
  const [speed, setSpeed] = useState(1);
  return (
    <Slider
      className="max-w-sm"
      label="Speaking speed"
      maxValue={1.2}
      minValue={0.7}
      onChange={setSpeed}
      step={0.05}
      value={speed}
    />
  );
};

<SpeedExample />

import { Slider } from '@arbol-ai/ui';

<Slider
  className="max-w-sm"
  defaultValue={[60_000, 180_000]}
  formatOptions={{ currency: 'COP', maximumFractionDigits: 0, style: 'currency' }}
  label="Consultation price"
  maxValue={300_000}
  step={10_000}
/>

import { Slider } from '@arbol-ai/ui';

<div className="flex max-w-sm items-center gap-3 text-sm">
  <span aria-hidden>A</span>
  <Slider aria-label="Text size" defaultValue={16} maxValue={24} minValue={12} />
  <span aria-hidden className="text-lg">
    A
  </span>
</div>