Contents
- Step
- Min and Max
Having trouble getting help?
Contact Support
Contact Support
Ticks in React Range Slider component
28 Feb 202515 minutes to read
The Ticks in Slider help you to easily identify the current value/values of the Slider. It includes smallStep
and largeStep
. The value of the major ticks alone will be displayed in the slider. To enable or disable the small ticks, use the showSmallTicks
property.
import * as React from 'react';
import * as ReactDOM from "react-dom";
import { SliderComponent } from '@syncfusion/ej2-react-inputs';
function App() {
let tooltip = { placement: "Before", isVisible: true, showOn: "Always" };
let value = 30;
// Slider ticks customization
let ticks = {
placement: "After",
largeStep: 20,
smallStep: 10,
showSmallTicks: true
};
return (<div id="container">
<div className="wrap">
<SliderComponent id="slider" value={value} tooltip={tooltip} ticks={ticks} />
</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: TooltipDataModel = { placement: "Before", isVisible: true, showOn: "Always" };
let value = 30;
// Slider ticks customization
let ticks: TicksDataModel = {
placement: "After",
largeStep: 20,
smallStep: 10,
showSmallTicks: true
};
return (
<div id="container">
<div className="wrap">
<SliderComponent id="slider" value={value} tooltip={tooltip} ticks={ticks} />
</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 Range Slider</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/28.2.3/ej2-base/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/28.2.3/ej2-react-inputs/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/28.2.3/ej2-react-popups/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/28.2.3/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>
Step
When the Slider is moved, it increases or decreases the value based on the step value. By default, the value changes by 1. Use the step
property to change the increment step value.
import * as React from 'react';
import * as ReactDOM from "react-dom";
import { SliderComponent } from '@syncfusion/ej2-react-inputs';
function App() {
let ticks = {
placement: "After",
largeStep: 20,
smallStep: 10,
showSmallTicks: true
};
let tooltip = { placement: "Before", isVisible: true, showOn: "Always" };
let value = 30;
// Enables step
let step = 10;
return (<div id="container">
<div className="wrap">
<SliderComponent id="slider" value={value} step={step} tooltip={tooltip} ticks={ticks} />
</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 ticks: TicksDataModel = {
placement: "After",
largeStep: 20,
smallStep: 10,
showSmallTicks: true
};
let tooltip: TooltipDataModel = { placement: "Before", isVisible: true, showOn: "Always" };
let value = 30;
// Enables step
let step = 10;
return (
<div id="container">
<div className="wrap">
<SliderComponent
id="slider"
value={value}
step={step}
tooltip={tooltip}
ticks={ticks}
/>
</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 Range Slider</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/28.2.3/ej2-base/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/28.2.3/ej2-react-inputs/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/28.2.3/ej2-react-popups/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/28.2.3/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>
Min and Max
Sets the minimum (starting) and maximum (ending) values of the Slider, by using the min
and max
property. By default, the minimum value is 1 and the maximum value is 100. In the following example, the Slider is rendered with the min value as 100 and max value as 1000.
import * as React from 'react';
import * as ReactDOM from "react-dom";
import { SliderComponent } from '@syncfusion/ej2-react-inputs';
function App() {
let ticks = {
placement: "After",
largeStep: 200,
smallStep: 100,
showSmallTicks: true
};
let tooltip = { placement: "Before", isVisible: true, showOn: "Always" };
// Minimum value
let min = 100;
// Maximum value
let max = 1100;
// Slider current value
let value = 400;
return (<div id="container">
<div className="wrap">
<SliderComponent id="slider" min={min} max={max} value={value} tooltip={tooltip} ticks={ticks} />
</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 ticks: TicksDataModel = {
placement: "After",
largeStep: 200,
smallStep: 100,
showSmallTicks: true
};
let tooltip: TooltipDataModel = { placement: "Before", isVisible: true, showOn: "Always" };
// Minimum value
let min = 100;
// Maximum value
let max = 1100;
// Slider current value
let value = 400;
return (
<div id="container">
<div className="wrap">
<SliderComponent
id="slider"
min={min}
max={max}
value={value}
tooltip={tooltip}
ticks={ticks}
/>
</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 Range Slider</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/28.2.3/ej2-base/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/28.2.3/ej2-react-inputs/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/28.2.3/ej2-react-popups/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/28.2.3/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>