The following section explains the required steps to build the simple Slider component with its basic usage in step by step procedure.
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
You can use create-react-app
to setup the
applications.
To install create-react-app
run the following command.
npm install -g create-react-app
Start a new project using create-react-app
command as follows
create-react-app quickstart --typescript
cd quickstart
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.
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;
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.
The Essential JS 2 quickstart application project is configured to compile and run the application in browser. Use the following command to run the application.
npm start
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'));
<!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="//cdn.syncfusion.com/ej2/20.4.38/ej2-base/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/20.4.38/ej2-react-inputs/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/20.4.38/ej2-react-popups/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/20.4.38/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>
</head>
<body>
<div id='element'>
</div>
</body>
</html>
.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;
}
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'));
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'));
<!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="//cdn.syncfusion.com/ej2/20.4.38/ej2-base/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/20.4.38/ej2-react-inputs/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/20.4.38/ej2-react-popups/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/20.4.38/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>
</head>
<body>
<div id='element'>
</div>
</body>
</html>
.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;
}
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'));
The Slider can be displayed, either in horizontal or vertical orientation. 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';
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'));
<!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="//cdn.syncfusion.com/ej2/20.4.38/ej2-base/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/20.4.38/ej2-react-inputs/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/20.4.38/ej2-react-popups/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/20.4.38/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>
</head>
<body>
<div id='element'>
</div>
</body>
</html>
.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;
}
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'));
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'));
<!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="//cdn.syncfusion.com/ej2/20.4.38/ej2-base/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/20.4.38/ej2-react-inputs/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/20.4.38/ej2-react-popups/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/20.4.38/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>
</head>
<body>
<div id='element'>
</div>
</body>
</html>
The Slider value can be changed by using the Increase and Decrease buttons. 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'));
<!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="//cdn.syncfusion.com/ej2/20.4.38/ej2-base/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/20.4.38/ej2-react-inputs/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/20.4.38/ej2-react-popups/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/20.4.38/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>
</head>
<body>
<div id='element'>
</div>
</body>
</html>
.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;
}
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'));