How To Integrate Slider In ReactJS

We can create the range slider of JS with the help of React JS too using RC-Slider.

We can use the range slider UI pattern to allow the user to select a single value between two range values. This pattern allows content to be adjusted within a given range. Moving the slider along the track increases or decreases the value. It works the same as the slider which we have in the JS.

Steps to create Slider

Step 1. Install Package

Npm install rc-slider

Step 2.  Open the index.html file and paste the below code-

<div id="root"></app>

Step 3.  Open the index.css file and paste the below code-

#root {
	max-width: 400px;
	margin: 2em auto;
}

Step 4. Open the app.js file and paste the below code -

import React, { useState } from "https://cdn.skypack.dev/[email protected]";
import ReactDOM from "https://cdn.skypack.dev/[email protected]";

import { Range } from "https://cdn.skypack.dev/[email protected]";

function Application() {
	const [ val1, setVal1 ] = useState( [ 0, 100 ] );
	const [ val2, setVal2 ] = useState( [ 0, 1 ] );
	return (
		<div>
			<p>{ val1[0] } - { val1[1] }</p>
			<Range
				draggableTrack
				min={ 0 }
				max={ 1000 }
				value={ val1 }
				onChange={ setVal1 }
			/>
			<p>{ val2[0] } - { val2[1] }</p>
			<Range
				draggableTrack
				min={ 0 }
				max={ 10 }
				value={ val2 }
				onChange={ setVal2 }
			/>
		</div>
	);
}

ReactDOM.render(<Application />, document.getElementById('root'));

Step 5. Your slider will look like this -

Thanks for Reading!