The Slider component can be validated using our FormValidator. The following steps walk-through slider validation.
// Initialize Form validation
let formObj: FormValidator;
formObj = new FormValidator("#formId", options);
validateHidden
property is set to true.// Slider element
<div id="default" name="slider"></div>
// sets required property in the FormValidator rules collection
let options: FormValidatorModel = {
rules: {
'default': {
validateHidden: true,
min: [6, "You must select value greater than 5"]
}
}
};
Form validation is done either by ID or name value of the slider component. Above ID of the slider is used to validate it.
Using slider name: Render slider with name attribute. In the following code snippet, name attribute value of slider is used for form validation.
// Slider element
<div id="default" name="slider"></div>
// sets required property in the FormValidator rules collection
let options: FormValidatorModel = {
rules: {
'slider': {
validateHidden: true,
min: [6, "You must select value greater than 5"]
}
}
};
formObj.validate();
// change event handler for slider
function onChanged(args: any) {
formObj.validate();
}
The FormValidator
has following default validation rules, which are used to validate the Slider component.
Rules | Description | Example |
---|---|---|
max |
Slider component must have value less than or equal to max number |
if max: 3 , 3 is valid and 4 is invalid |
min |
Slider component must have value greater than or equal to min number |
if min: 4 , 5 is valid and 2 is invalid |
regex |
Slider component must have valid value in regex format |
if regex: '/4/ , 4 is valid and 1 is invalid |
range |
Slider component must have value between range number |
if range: [4,5] , 4 is valid and 6 is invalid |
import * as React from 'react';
import * as ReactDOM from "react-dom";
import { SliderComponent } from '@syncfusion/ej2-react-inputs';
import { FormValidator } from '@syncfusion/ej2-inputs';
function App() {
React.useEffect(() => {
componentDidMount();
}, []);
let ticks = { placement: "Before", largeStep: 20, smallStep: 5, showSmallTicks: true };
let value = [30, 70];
// sets required property in the FormValidator rules collection
let minOptions = {
rules: {
"min-slider": {
validateHidden: true,
min: [40, "You must select value greater than or equal to 40"]
}
}
};
// sets required property in the FormValidator rules collection
let maxOptions = {
rules: {
"max-slider": {
validateHidden: true,
max: [40, "You must select value less than or equal to 40"]
}
}
};
// sets required property in the FormValidator rules collection
let valOptions = {
rules: {
"val-slider": {
validateHidden: true,
regex: [/40/, "You must select value equal to 40"]
}
}
};
// sets required property in the FormValidator rules collection
let rangeOptions = {
rules: {
"range-slider": {
validateHidden: true,
range: [40, 80, "You must select values between 40 and 80"]
}
}
};
// sets required property in the FormValidator rules collection
let customOptions = {
rules: {
"custom-slider": {
validateHidden: true,
range: [validateRange.bind(this), "You must select values between 40 and 80"]
}
}
};
// Initialize Form validation
let formMinObj = null;
let formMaxObj = null;
let formValObj = null;
let formRangeObj = null;
let formCustomObj = null;
function componentDidMount() {
formMinObj = new FormValidator("#formMinId", minOptions);
formMaxObj = new FormValidator("#formMaxId", maxOptions);
formValObj = new FormValidator("#formValId", valOptions);
formRangeObj = new FormValidator("#formRangeId", rangeOptions);
formCustomObj = new FormValidator("#formCustomId", customOptions);
}
function onMinChanged(args) {
// validate the slider value in the form
formMinObj.validate();
}
function onMaxChanged(args) {
// validate the slider value in the form
formMaxObj.validate();
}
function onValChanged(args) {
// validate the slider value in the form
formValObj.validate();
}
function onRangeChanged(args) {
// validate the slider value in the form
formRangeObj.validate();
}
function onCustomChanged(args) {
// validate the slider value in the form
formCustomObj.validate();
}
let SliderCustomObj = null;
function validateRange(args) {
return (SliderCustomObj.value[0] >= 40 &&
SliderCustomObj.value[1] <= 80);
}
return (<div id="container">
<div className="col-lg-12 control-section">
<div className="content-wrapper">
<div className="form-title">
<span>Min</span>
</div>
<form id="formMinId" className="form-horizontal">
<div className="form-group">
<div className="e-float-input">
<SliderComponent id="min-slider" name="min-slider" type="MinRange" value={30} ticks={ticks} changed={onMinChanged.bind(this)}/>
</div>
</div>
</form>
<div className="form-title">
<span>Max</span>
</div>
<form id="formMaxId" className="form-horizontal">
<div className="form-group">
<div className="e-float-input">
<SliderComponent id="max-slider" name="max-slider" type="MinRange" value={30} ticks={ticks} changed={onMaxChanged.bind(this)}/>
</div>
</div>
</form>
<div className="form-title">
<span>Value</span>
</div>
<form id="formValId" className="form-horizontal">
<div className="form-group">
<div className="e-float-input">
<SliderComponent id="val-slider" name="val-slider" type="MinRange" value={30} ticks={ticks} changed={onValChanged.bind(this)}/>
</div>
</div>
</form>
<div className="form-title">
<span>Range</span>
</div>
<form id="formRangeId" className="form-horizontal">
<div className="form-group">
<div className="e-float-input">
<SliderComponent id="range-slider" name="range-slider" type="MinRange" value={30} ticks={ticks} changed={onRangeChanged.bind(this)}/>
</div>
</div>
</form>
<div className="form-title">
<span>Custom</span>
</div>
<form id="formCustomId" className="form-horizontal">
<div className="form-group">
<div className="e-float-input">
<SliderComponent id="custom-slider" name="custom-slider" type="Range" value={value} ticks={ticks} changed={onCustomChanged.bind(this)} ref={slider => {
SliderCustomObj = slider;
}}/>
</div>
</div>
</form>
</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.48/ej2-base/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/20.4.48/ej2-react-inputs/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/20.4.48/ej2-react-popups/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/20.4.48/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>
.highcontrast form {
background: #000000
}
/* csslint ignore:start */
.highcontrast label.e-custom-label,
.highcontrast label.e-float-text,
.highcontrast label.salary,
.highcontrast input::placeholder,
.highcontrast .e-float-input label.e-float-text {
color: #fff !important;
line-height: 2.3;
}
/* csslint ignore:end */
.e-error,
.e-float-text {
font-weight: 500;
}
table,
td,
th {
padding: 5px;
}
.form-horizontal .form-group {
margin-left: 0;
margin-right: 0;
}
form {
border: 1px solid #ccc;
box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.36);
border-radius: 5px;
background: #f9f9f9;
padding: 23px;
padding-bottom: 20px;
margin: auto;
max-width: 650px;
}
.form-title {
width: 100%;
text-align: center;
padding: 10px;
font-size: 16px;
font-weight: 600;
color: black;
}
import * as React from 'react';
import * as ReactDOM from "react-dom";
import { SliderComponent } from '@syncfusion/ej2-react-inputs';
import { FormValidator, FormValidatorModel } from '@syncfusion/ej2-inputs';
import { ButtonComponent } from '@syncfusion/ej2-react-buttons';
function App() {
React.useEffect(() => {
componentDidMount();
}, []);
let ticks: object ={ placement: "Before", largeStep: 20, smallStep: 5, showSmallTicks: true };
let value: number[] = [30, 70];
// sets required property in the FormValidator rules collection
let minOptions: FormValidatorModel = {
rules: {
"min-slider": {
validateHidden: true,
min: [40, "You must select value greater than or equal to 40"]
}
}
};
// sets required property in the FormValidator rules collection
let maxOptions: FormValidatorModel = {
rules: {
"max-slider": {
validateHidden: true,
max: [40, "You must select value less than or equal to 40"]
}
}
};
// sets required property in the FormValidator rules collection
let valOptions: FormValidatorModel = {
rules: {
"val-slider": {
validateHidden: true,
regex: [/40/, "You must select value equal to 40"]
}
}
};
// sets required property in the FormValidator rules collection
let rangeOptions: FormValidatorModel = {
rules: {
"range-slider": {
validateHidden: true,
range: [40, 80, "You must select values between 40 and 80"]
}
}
};
// sets required property in the FormValidator rules collection
let customOptions: FormValidatorModel = {
rules: {
"custom-slider": {
validateHidden: true,
range: [validateRange.bind(this), "You must select values between 40 and 80"]
}
}
};
// Initialize Form validation
let formMinObj: FormValidator = null as any;
let formMaxObj: FormValidator = null as any;
let formValObj: FormValidator = null as any;
let formRangeObj: FormValidator = null as any;
let formCustomObj: FormValidator = null as any;
function componentDidMount(){
formMinObj = new FormValidator("#formMinId", minOptions);
formMaxObj = new FormValidator("#formMaxId", maxOptions);
formValObj = new FormValidator("#formValId", valOptions);
formRangeObj = new FormValidator("#formRangeId", rangeOptions);
formCustomObj = new FormValidator("#formCustomId", customOptions);
}
function onMinChanged(args: any): void {
// validate the slider value in the form
formMinObj.validate();
}
function onMaxChanged(args: any): void {
// validate the slider value in the form
formMaxObj.validate();
}
function onValChanged(args: any): void {
// validate the slider value in the form
formValObj.validate();
}
function onRangeChanged(args: any) {
// validate the slider value in the form
formRangeObj.validate();
}
function onCustomChanged(args: any) {
// validate the slider value in the form
formCustomObj.validate();
}
let SliderCustomObj: SliderComponent = null as any;
function validateRange(args: any) {
return (
(SliderCustomObj.value as number[])[0] >= 40 &&
(SliderCustomObj.value as number[])[1] <= 80
);
}
return (
<div id="container">
<div className="col-lg-12 control-section">
<div className="content-wrapper">
<div className="form-title">
<span>Min</span>
</div>
<form id="formMinId" className="form-horizontal">
<div className="form-group">
<div className="e-float-input">
<SliderComponent
id="min-slider"
name="min-slider"
type="MinRange"
value={30}
ticks={ticks}
changed={onMinChanged.bind(this)}
/>
</div>
</div>
</form>
<div className="form-title">
<span>Max</span>
</div>
<form id="formMaxId" className="form-horizontal">
<div className="form-group">
<div className="e-float-input">
<SliderComponent
id="max-slider"
name="max-slider"
type="MinRange"
value={30}
ticks={ticks}
changed={onMaxChanged.bind(this)}
/>
</div>
</div>
</form>
<div className="form-title">
<span>Value</span>
</div>
<form id="formValId" className="form-horizontal">
<div className="form-group">
<div className="e-float-input">
<SliderComponent
id="val-slider"
name="val-slider"
type="MinRange"
value={30}
ticks={ticks}
changed={onValChanged.bind(this)}
/>
</div>
</div>
</form>
<div className="form-title">
<span>Range</span>
</div>
<form id="formRangeId" className="form-horizontal">
<div className="form-group">
<div className="e-float-input">
<SliderComponent
id="range-slider"
name="range-slider"
type="MinRange"
value={30}
ticks={ticks}
changed={onRangeChanged.bind(this)}
/>
</div>
</div>
</form>
<div className="form-title">
<span>Custom</span>
</div>
<form id="formCustomId" className="form-horizontal">
<div className="form-group">
<div className="e-float-input">
<SliderComponent
id="custom-slider"
name="custom-slider"
type="Range"
value={value}
ticks={ticks}
changed={onCustomChanged.bind(this)}
ref={slider => {
SliderCustomObj = slider as any;
}}
/>
</div>
</div>
</form>
</div>
</div>
</div>
);
}
export default App;
ReactDOM.render(<App />, document.getElementById('element'));