Skip to content

Home

Uncontrolled range input

Renders an uncontrolled range input element that uses a callback function to pass its value to the parent component.

const Slider = ({
  min = 0,
  max = 100,
  defaultValue,
  onValueChange,
  ...rest
}) => {
  return (
    <input
      type="range"
      min={min}
      max={max}
      defaultValue={defaultValue}
      onChange={({ target: { value } }) => onValueChange(value)}
      {...rest}
    />
  );
};

ReactDOM.createRoot(document.getElementById('root')).render(
  <Slider onValueChange={val => console.log(val)} />
);

More like this

Start typing a keyphrase to see matching snippets.