Getting Started
8 May 202524 minutes to read
The following section explains the required steps to build the simple Slider component with its basic usage in step by step procedure.
To get start quickly with React Range Slider, you can check on this video:
Dependencies
Install the below required dependent packages to render the Slider component.
|-- @syncfusion/ej2-react-inputs
|-- @syncfusion/ej2-react-base
|-- @syncfusion/ej2-react-popups
|-- @syncfusion/ej2-react-buttons
|-- @syncfusion/ej2-inputs
|-- @syncfusion/ej2-base
|-- @syncfusion/ej2-popups
|-- @syncfusion/ej2-buttons
Installation and Configuration
To easily set up a React application, use create-vite-app
, which provides a faster development environment, smaller bundle sizes, and optimized builds compared to traditional tools like create-react-app
. For detailed steps, refer to the Vite installation instructions. Vite sets up your environment using JavaScript and optimizes your application for production.
Note: To create a React application using
create-react-app
, refer to this documentation for more details.
To create a new React application, run the following command.
npm create vite@latest my-app
To set-up a React application in TypeScript environment, run the following command.
npm create vite@latest my-app -- --template react-ts
cd my-app
npm run dev
To set-up a React application in JavaScript environment, run the following command.
npm create vite@latest my-app -- --template react
cd my-app
npm run dev
Adding Syncfusion® packages
All the available Essential® JS 2 packages are published in npmjs.com
public registry. Now, we are going to render Slider
component from these packages.
To install Slider
component, use the following command.
npm install @syncfusion/ej2-react-inputs --save
The above command installs Slider dependencies which are required to render the component in the React
environment.
Adding CSS Reference
Import Slider
component required theme references at the top of src/App.css
.
@import "../node_modules/@syncfusion/ej2-base/styles/material.css";
@import "../node_modules/@syncfusion/ej2-buttons/styles/material.css";
@import "../node_modules/@syncfusion/ej2-popups/styles/material.css";
@import "../node_modules/@syncfusion/ej2-react-inputs/styles/material.css";
We can also use CRG to generate combined component styles.
Adding Slider component
Now, you can add Slider
component in the application. For getting started, add Slider
component in src/App.tsx
file using the following code snippet.
import * as React from 'react';
import { SliderComponent } from '@syncfusion/ej2-react-inputs';
import './App.css';
function App() {
return (
<div id='container'>
<div className='wrap'>
<SliderComponent id='slider' value={30} />
</div>
</div>
);
}
export default App;
Run the Application
Now run the npm run dev
command in the console to start the development server. This command compiles your code and serves the application locally, opening it in the browser.
npm run dev
import * as React from 'react';
import * as ReactDOM from "react-dom";
import { SliderComponent } from '@syncfusion/ej2-react-inputs';
function App() {
return (<div id='container'>
<div className='wrap'>
<div className="sliderwrap">
<SliderComponent id='default' value={30}/>
</div>
</div>
</div>);
}
export default App;
ReactDOM.render(<App />, document.getElementById('element'));
import * as React from 'react';
import * as ReactDOM from "react-dom";
import { SliderComponent } from '@syncfusion/ej2-react-inputs';
function App() {
return (
<div id='container'>
<div className='wrap'>
<div className="sliderwrap">
<SliderComponent id='default' value={30} />
</div>
</div>
</div>
);
}
export default App;
ReactDOM.render(<App />, document.getElementById('element'));
.sliderwrap {
margin-top: 20px;
}
.sliderwrap label {
font-size: 13px;
font-weight: 100;
margin-top: 15px;
padding-bottom: 15px;
}
.wrap {
box-sizing: border-box;
height: 100px;
margin: 0 auto;
padding: 30px 10px;
width: 460px;
}
.wrap .label {
text-align: center;
}
.labeltext {
text-align: center;
}
<!DOCTYPE html>
<html lang="en">
<head>
<title>Syncfusion React ListView</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="Essential JS 2 for React Components" />
<meta name="author" content="Syncfusion" />
<link href="https://cdn.syncfusion.com/ej2/30.1.37/ej2-base/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/30.1.37/ej2-react-inputs/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/30.1.37/ej2-react-popups/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/30.1.37/ej2-react-buttons/styles/material.css" rel="stylesheet" />
<link href="index.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
<script src="systemjs.config.js"></script>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>
<body>
<div id='element'>
</div>
</body>
</html>
Types
The types of Slider are as follows:
Types | Usage |
---|---|
Default | Shows a default Slider to select a single value. |
MinRange | Displays the shadow from the start value to the current selected value. |
Range | Selects a range of values. It also displays the shadow in-between the selection range. |
Both the Default Slider and Min-Range Slider have same behavior that is used to select a single value.
In Min-Range Slider, a shadow is considered from the start value to current handle position. But the Range Slider
contains two handles that is used to select a range of values and a shadow is considered in between the two handles.
import * as React from 'react';
import * as ReactDOM from "react-dom";
import { SliderComponent } from '@syncfusion/ej2-react-inputs';
function App() {
return (<div id='container'>
<div className='wrap'>
<div className="sliderwrap">
<div className="labeltext">Default</div>
<SliderComponent id='default' value={30}/>
</div>
<div className="sliderwrap">
<div className="labeltext">MinRange</div>
<SliderComponent id='minrange' type='MinRange' value={30}/>
</div>
<div className="sliderwrap">
<div className="labeltext">Range</div>
<SliderComponent id='range' type='Range' value={[30, 70]}/>
</div>
</div>
</div>);
}
export default App;
ReactDOM.render(<App />, document.getElementById('element'));
import * as React from 'react';
import * as ReactDOM from "react-dom";
import { SliderComponent } from '@syncfusion/ej2-react-inputs';
function App() {
return (
<div id='container'>
<div className='wrap'>
<div className="sliderwrap">
<div className="labeltext">Default</div>
<SliderComponent id='default' value={30}/>
</div>
<div className="sliderwrap">
<div className="labeltext">MinRange</div>
<SliderComponent id='minrange' type='MinRange' value={30} />
</div>
<div className="sliderwrap">
<div className="labeltext">Range</div>
<SliderComponent id='range' type='Range' value={[30, 70]} />
</div>
</div>
</div>
);
}
export default App;
ReactDOM.render(<App />, document.getElementById('element'));
.sliderwrap {
margin-top: 20px;
}
.sliderwrap label {
font-size: 13px;
font-weight: 100;
margin-top: 15px;
padding-bottom: 15px;
}
.wrap {
box-sizing: border-box;
height: 100px;
margin: 0 auto;
padding: 30px 10px;
width: 460px;
}
.wrap .label {
text-align: center;
}
.labeltext {
text-align: center;
}
<!DOCTYPE html>
<html lang="en">
<head>
<title>Syncfusion React ListView</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="Essential JS 2 for React Components" />
<meta name="author" content="Syncfusion" />
<link href="https://cdn.syncfusion.com/ej2/30.1.37/ej2-base/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/30.1.37/ej2-react-inputs/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/30.1.37/ej2-react-popups/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/30.1.37/ej2-react-buttons/styles/material.css" rel="stylesheet" />
<link href="index.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
<script src="systemjs.config.js"></script>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>
<body>
<div id='element'>
</div>
</body>
</html>
Customization
Orientation
The Slider can be displayed, either in horizontal or vertical orientation using orientation
property. By default, the Slider renders in horizontal orientation.
import * as React from 'react';
import * as ReactDOM from "react-dom";
import { SliderComponent } from '@syncfusion/ej2-react-inputs';
import './index.css';
function App() {
return (<div id='container'>
<div className='wrap'>
<SliderComponent id='slider' orientation='Vertical' value={30}/>
</div>
</div>);
}
export default App;
ReactDOM.render(<App />, document.getElementById('element'));
import * as React from 'react';
import * as ReactDOM from "react-dom";
import { SliderComponent } from '@syncfusion/ej2-react-inputs';
function App() {
return (
<div id='container'>
<div className='wrap'>
<SliderComponent id='slider' orientation='Vertical' value={30} />
</div>
</div>
);
}
export default App;
ReactDOM.render(<App />, document.getElementById('element'));
.wrap {
box-sizing: border-box;
height: 260px;
margin: 0 auto;
padding: 30px 10px;
width: 260px;
}
.sliderwrap {
margin-top: 20px;
}
.sliderwrap label {
font-size: 13px;
font-weight: 100;
margin-top: 15px;
padding-bottom: 15px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<title>Syncfusion React ListView</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="Essential JS 2 for React Components" />
<meta name="author" content="Syncfusion" />
<link href="https://cdn.syncfusion.com/ej2/30.1.37/ej2-base/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/30.1.37/ej2-react-inputs/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/30.1.37/ej2-react-popups/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/30.1.37/ej2-react-buttons/styles/material.css" rel="stylesheet" />
<link href="index.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
<script src="systemjs.config.js"></script>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>
<body>
<div id='element'>
</div>
</body>
</html>
Tooltip
The Slider displays the tooltip to indicate the current value by clicking the Slider bar or drag the Slider handle. The Tooltip position can be customized by using the placement
property.
Also decides the tooltip display mode on a page, i.e., on hovering, focusing, or clicking on the Slider handle and it always remains/displays on the page.
import * as React from 'react';
import * as ReactDOM from "react-dom";
import { SliderComponent } from '@syncfusion/ej2-react-inputs';
function App() {
let tooltip = { placement: 'After', isVisible: true, showOn: 'Always' };
return (<div id='container'>
<div className='wrap'>
<SliderComponent id='slider' type="MinRange" tooltip={tooltip} value={30}/>
</div>
</div>);
}
export default App;
ReactDOM.render(<App />, document.getElementById('element'));
import * as React from 'react';
import * as ReactDOM from "react-dom";
import { SliderComponent } from '@syncfusion/ej2-react-inputs';
function App() {
let tooltip: Object = { placement: 'After', isVisible: true, showOn: 'Always' };
return (
<div id='container'>
<div className='wrap'>
<SliderComponent id='slider' type="MinRange" tooltip={tooltip} value={30} />
</div>
</div>
);
}
export default App;
ReactDOM.render(<App />, document.getElementById('element'));
Buttons
The Slider value can be changed by using the showButtons
property to Increase and Decrease the values. In Range Slider, by default the first handle value will be changed while clicking the button. Change the handle focus and press the button to change the last focused handle value.
After enabling the Slider buttons if the ‘Tab’ key is pressed, the focus goes to the handle
and not to the button.
import * as React from 'react';
import * as ReactDOM from "react-dom";
import { SliderComponent } from '@syncfusion/ej2-react-inputs';
function App() {
return (<div id='container'>
<div className='wrap'>
<SliderComponent id='slider' showButtons={true} type='Range' value={[30, 70]}/>
</div>
</div>);
}
export default App;
ReactDOM.render(<App />, document.getElementById('element'));
import * as React from 'react';
import * as ReactDOM from "react-dom";
import { SliderComponent } from '@syncfusion/ej2-react-inputs';
function App() {
return (
<div id='container'>
<div className='wrap'>
<SliderComponent id='slider' showButtons={true} type='Range' value={[30, 70]} />
</div>
</div>
);
}
export default App;
ReactDOM.render(<App />, document.getElementById('element'));
.sliderwrap {
margin-top: 20px;
}
.sliderwrap label {
font-size: 13px;
font-weight: 100;
margin-top: 15px;
padding-bottom: 15px;
}
.wrap {
box-sizing: border-box;
height: 100px;
margin: 0 auto;
padding: 30px 10px;
width: 460px;
}
.wrap .label {
text-align: center;
}
.labeltext {
text-align: center;
}
<!DOCTYPE html>
<html lang="en">
<head>
<title>Syncfusion React ListView</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="Essential JS 2 for React Components" />
<meta name="author" content="Syncfusion" />
<link href="https://cdn.syncfusion.com/ej2/30.1.37/ej2-base/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/30.1.37/ej2-react-inputs/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/30.1.37/ej2-react-popups/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/30.1.37/ej2-react-buttons/styles/material.css" rel="stylesheet" />
<link href="index.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
<script src="systemjs.config.js"></script>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>
<body>
<div id='element'>
</div>
</body>
</html>