React Range In ReactJS

React Range is a popular library that provides a simple way to add range sliders to React applications. A range slider is a UI element that allows the user to select a range of values within a given minimum and maximum. In this blog, we’ll look at how to use React Range to add range sliders to a React app.

To start, you’ll need to install the react-range library, which provides the components and functions you’ll need to add range sliders to your React app. You can install it using npm or yarn:

npm install react-range

or

yarn add react-range

Once you’ve installed the library, you can use the Range component from react-range to add a range slider to your app. The Range component takes a number of props that allow you to customize the appearance and behavior of the range slider.

Here’s an example of how to use the Range component to add a range slider to a React app:

import { Range } from 'react-range';

function App() {
  const [value, setValue] = useState([20, 80]);

  return (
    <Range
      values={value}
      onChange={values => setValue(values)}
      step={1}
      min={0}
      max={100}
      renderTrack={({ props, children }) => (
        <div
          onMouseDown={props.onMouseDown}
          onTouchStart={props.onTouchStart}
          style={{
            ...props.style,
            height: '36px',
            display: 'flex',
            width: '100%'
          }}
        >
          <div
            ref={props.ref}
            style={{
              height: '5px',
              width: '100%',
              borderRadius: '4px',
              background: '#CCCCCC',
              alignSelf: 'center'
            }}
          >
            {children}
          </div>
        </div>
      )}
      renderThumb={({ props, isDragged }) => (
        <div
          {...props}
          style={{
            ...props.style,
            height: '42px',
            width: '42px',
            borderRadius: '4px',
            backgroundColor: '#FFF',
            display: 'flex',
            justifyContent: 'center',
            alignItems: 'center',
            boxShadow: '0px 2px 6px #AAA'
          }}
        >
          <div
            style={{
              height: '16px',
              width: '5px',
              backgroundColor: isDragged ? '#548BF4' : '#CCC'
            }}
          />
        </div>
      )}
    />
  );
}

In the example above, the Range component is rendered with a minimum value of 0, a maximum value of 100, and a step size of 1. The renderTrack prop is used to customize the appearance of the track, and the renderThumb prop is used to customize the appearance of the thumbs.

Thanks for reading the blog you can ask doubts in comment section.