Uncontrolled range input

React, Components, Input · Nov 25, 2020

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

  • Set the type of the <input> element to "range" to create a slider.
  • Use the defaultValue passed down from the parent as the uncontrolled input field's initial value.
  • Use the onChange event to fire the onValueChange callback and send the new value to the parent.
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.render(
  <Slider onValueChange={val => console.log(val)} />,
  document.getElementById('root')
);

More like this

  • Uncontrolled select element

    Renders an uncontrolled <select> element that uses a callback function to pass its value to the parent component.

    React, Components · Nov 25, 2020

  • Uncontrolled textarea element

    Renders an uncontrolled <textarea> element that uses a callback function to pass its value to the parent component.

    React, Components · Nov 25, 2020

  • Uncontrolled input field

    Renders an uncontrolled <input> element that uses a callback function to inform its parent about value updates.

    React, Components · Nov 3, 2020