Slider

const [value, setValue] = useState([400]);

<span className="font-mono text-5xl" style={{ fontWeight: value[0] }}>Aa</span>
<Slider
  value={value}
  onValueChange={(newValue) =>
    setValue(Array.isArray(newValue) ? [...newValue] : [newValue])
  }
  min={100}
  max={800}
  step={25}
/>

{/* Range — two thumbs from one array */}
<Slider defaultValue={[25, 75]} />

{/* Disabled */}
<Slider defaultValue={[40]} disabled />

{/* Vertical */}
<Slider orientation="vertical" defaultValue={[60]} />