Slider

import { Slider } from '@elirobinson/react/components/atoms/Slider';

import { Slider } from '@elirobinson/react/components/atoms/Slider';

export default function Basic() {
  return <Slider label="Volume" min={0} max={100} defaultValue={50} />;
}

When to use it

Use Slider for a value picked from a continuous or stepped numeric range, where the gesture matters more than the exact typed number — volume, brightness, a price range. Use Input type="number" instead when typed precision is the point (dollar amounts, exact ages).

Controlled

Slider doesn't render the current value anywhere — show it yourself off the same state.

import { useState } from 'react';

import { Slider } from '@elirobinson/react/components/atoms/Slider';

export default function Controlled() {
  const [minutes, setMinutes] = useState(45);

  return (
    <div className="demo-col">
      <Slider
        label="Session length"
        min={15}
        max={90}
        step={15}
        value={minutes}
        onChange={(event) => setMinutes(Number(event.target.value))}
      />
      <p>{minutes} minutes per session.</p>
    </div>
  );
}

Props

Accessibility

• Renders a native <input type="range">, which carries the implicit slider role and full keyboard support from the browser — arrow keys adjust by step, Home/End jump to the min/max. Nothing here reimplements it.
• The label is a real <label htmlFor> pointed at the input's id, auto-generated with useId when you don't pass one.
• No value bubble or tooltip appears while dragging — if readers need to see the number, render it next to the slider yourself.
• The ref forwards to the underlying <input>.

Related