Form slider with Form Validator in React Range Slider component

08 Apr 2021 / 5 minutes to read

The Slider component can be validated using our FormValidator. The following steps walk-through slider validation.

Render slider component inside a form.
Bind changed event in the slider component to validate the slider value when the value changes.
Initialize and render FormValidator for the form using form ID.

// Initialize Form validation
let formObj: FormValidator;
formObj = new FormValidator("#formId", options);

Set the required property in the FormValidator rules collection. Here, the min property of slider that sets the minimum value in the slider component is set, and it has hidden input as enable 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"]
}
  }
};

Validate the form using validate method, and it validates the slider value with the defined rules collection and returns the result. If user selects the value less than the minimum value, form will not submit.

formObj.validate();

Slider validation can be done during value changes in slider. Refer to the following code snippet.

// 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

Source

Preview

index.tsx

index.html

index.css

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';

export default class App extends React.Component<{}, {}> {
  private ticks: object = { placement: "Before", largeStep: 20, smallStep: 5, showSmallTicks: true };
  private value: number[] = [30, 70];

  // sets required property in the FormValidator rules collection
  private 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
  private 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
  private valOptions: FormValidatorModel = {
rules: {
  "val-slider": {
    validateHidden: true,
    regex: [/40/, "You must select value equal to 40"]
  }
}
  };

  // sets required property in the FormValidator rules collection
  private 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
  private customOptions: FormValidatorModel = {
rules: {
  "custom-slider": {
    validateHidden: true,
    range: [this.validateRange.bind(this), "You must select values between 40 and 80"]
  }
}
  };

  // Initialize Form validation
  private formMinObj: FormValidator = null as any;

  private formMaxObj: FormValidator = null as any;

  private formValObj: FormValidator = null as any;

  private formRangeObj: FormValidator = null as any;

  private formCustomObj: FormValidator = null as any;

  public componentDidMount(): void {
this.formMinObj = new FormValidator("#formMinId", this.minOptions);
this.formMaxObj = new FormValidator("#formMaxId", this.maxOptions);
this.formValObj = new FormValidator("#formValId", this.valOptions);
this.formRangeObj = new FormValidator("#formRangeId", this.rangeOptions);
this.formCustomObj = new FormValidator("#formCustomId", this.customOptions);
  }

  private onMinChanged(args: any): void {
// validate the slider value in the form
this.formMinObj.validate();
  }

  private onMaxChanged(args: any): void {
// validate the slider value in the form
this.formMaxObj.validate();
  }

  private onValChanged(args: any): void {
// validate the slider value in the form
this.formValObj.validate();
  }

  private onRangeChanged(args: any) {
// validate the slider value in the form
this.formRangeObj.validate();
  }

  private onCustomChanged(args: any) {
// validate the slider value in the form
this.formCustomObj.validate();
  }

  private SliderCustomObj: SliderComponent = null as any;

  private validateRange(args: any) {
return (
  (this.SliderCustomObj.value as number[])[0] >= 40 &&
  (this.SliderCustomObj.value as number[])[1] <= 80
);
  }

  render() {
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={this.ticks}
                changed={this.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={this.ticks}
                changed={this.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={this.ticks}
                changed={this.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={this.ticks}
                changed={this.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={this.value}
                ticks={this.ticks}
                changed={this.onCustomChanged.bind(this)}
                ref={slider => {
                  this.SliderCustomObj = slider as any;
                }}
              />
            </div>
          </div>
        </form>
      </div>
    </div>
  </div>
);
  }
}

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/ej2-base/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/ej2-react-inputs/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/ej2-react-popups/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/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;
}

Please provide additional information

Thank you for your feedback and comments.We will rectify this as soon as possible!