Form Slider with formvalidator in React Range Slider component

28 Feb 202524 minutes to read

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

  • Render the 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. The ID of the Slider shown above 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 the user selects a value less than the minimum value, the 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 
import * as React from 'react';
import * as ReactDOM from "react-dom";
import { SliderComponent } from '@syncfusion/ej2-react-inputs';
import { FormValidator } from '@syncfusion/ej2-inputs';
import './index.css';
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() {
    // validate the Slider value in the form
    formMinObj.validate();
  }
  function onMaxChanged() {
    // validate the Slider value in the form
    formMaxObj.validate();
  }
  function onValChanged() {
    // validate the Slider value in the form
    formValObj.validate();
  }
  function onRangeChanged() {
    // validate the Slider value in the form
    formRangeObj.validate();
  }
  function onCustomChanged() {
    // validate the Slider value in the form
    formCustomObj.validate();
  }
  let SliderCustomObj = null;
  function validateRange() {
    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'));
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';

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(): void {
    // validate the Slider value in the form
    formMinObj.validate();
  }

  function onMaxChanged(): void {
    // validate the Slider value in the form
    formMaxObj.validate();
  }

  function onValChanged(): void {
    // validate the Slider value in the form
    formValObj.validate();
  }

  function onRangeChanged() {
    // validate the Slider value in the form
    formRangeObj.validate();
  }

  function onCustomChanged() {
    // validate the Slider value in the form
    formCustomObj.validate();
  }

  let SliderCustomObj: SliderComponent = null as any;

  function validateRange() {
    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'));
.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;
}
<!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/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>