How To Integrate Slider In ReactJS

BOOKC, this time share about How To Integrate Slider In ReactJS

This time I will give a tutorial How To Integrate Slider In ReactJS. We can use the range slider UI pattern to allow the user to select one value between two range values. This pattern allows the content to be adjusted within a certain range. Moving the slider along the track will increase or decrease its value. This works the same as the slider we have in 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/react@17.0.1";
import ReactDOM from "https://cdn.skypack.dev/react-dom@17.0.1";

import { Range } from "https://cdn.skypack.dev/rc-slider@9.7.1";

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

That's an article about How To Integrate Slider In ReactJS, hopefully it's useful and don't forget to share it with your friends if this information helps you.

Bookc
Admin

Hopefully the information we provide can be useful.

Press ESC to close