Validate slider using FormValidator in EJ2 TypeScript Range Slider control

3 Mar 202520 minutes to read

The Range Slider control can be validated using our FormValidator. The following steps walk through the slider validation process.

  • Render the Range Slider control inside a form.
  • Bind the changed event in the Range Slider to validate the slider value when it changes.
  • Initialize and render FormValidator for the form using the 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 Range Slider control 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 Range Slider control. 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 Range Slider control.

Rules Description Example
max Range Slider control must have value less than or equal to max number if max: 3, 3 is valid and 4 is invalid
min Range Slider control must have value greater than or equal to min number if min: 4, 5 is valid and 2 is invalid
regex Range Slider control must have valid value in regex format if regex: '/4/, 4 is valid and 1 is invalid
range Range Slider control must have value between range number if range: [4,5], 4 is valid and 6 is invalid 
import { Slider } from '@syncfusion/ej2-inputs';
import { FormValidator, FormValidatorModel } from '@syncfusion/ej2-inputs';

// Initialize Range Slider Control
let SliderMinObj: Slider = new Slider({
  type: 'MinRange',
  value: 30,
  ticks: { placement: 'Before', largeStep: 20, smallStep: 5, showSmallTicks: true },
  changed: onMinChanged
});
SliderMinObj.appendTo("#min-slider");

// 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"]
    }
  }
};

// Initialize Form validation
let formMinObj: FormValidator;
formMinObj = new FormValidator("#formMinId", minOptions);

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

// Initialize Range Slider Control
let SliderMaxObj: Slider = new Slider({
  type: 'MinRange',
  value: 30,
  ticks: { placement: 'Before', largeStep: 20, smallStep: 5, showSmallTicks: true },
  changed: onMaxChanged
});
SliderMaxObj.appendTo("#max-slider");

// 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"]
    }
  }
};

// Initialize Form validation
let formMaxObj: FormValidator;
formMaxObj = new FormValidator("#formMaxId", maxOptions);

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

// Initialize Range Slider Control
let SliderValObj: Slider = new Slider({
  type: 'MinRange',
  value: 30,
  ticks: { placement: 'Before', largeStep: 20, smallStep: 5, showSmallTicks: true },
  changed: onValChanged
});
SliderValObj.appendTo("#val-slider");

// 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"]
    }
  }
};

// Initialize Form validation
let formValObj: FormValidator;
formValObj = new FormValidator("#formValId", valOptions);

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

// Initialize Range Slider Control
let SliderRangeObj: Slider = new Slider({
  type: 'MinRange',
  value: 30,
  ticks: { placement: 'Before', largeStep: 20, smallStep: 5, showSmallTicks: true },
  changed: onRangeChanged
});
SliderRangeObj.appendTo("#range-slider");

// 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"]
    }
  }
};

// Initialize Form validation
let formRangeObj: FormValidator;
formRangeObj = new FormValidator("#formRangeId", rangeOptions);

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

// Initialize Range Slider Control
let SliderCustomObj: Slider = new Slider({
  type: 'Range',
  value: [30, 70],
  ticks: { placement: 'Before', largeStep: 20, smallStep: 5, showSmallTicks: true },
  changed: onCustomChanged
});
SliderCustomObj.appendTo("#custom-slider");

// sets required property in the FormValidator rules collection
let customOptions: FormValidatorModel = {
  rules: {
    'custom-slider': {
      validateHidden: true,
      range: [validateRange, "You must select values between 40 and 80"]
    }
  }
};

// Initialize Form validation
let formCustomObj: FormValidator;
formCustomObj = new FormValidator("#formCustomId", customOptions);

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

function validateRange(args: any) {
  return (SliderCustomObj.value as number[])[0] >= 40 && (SliderCustomObj.value as number[])[1] <= 80;
}
<!DOCTYPE html>
<html lang="en">

<head>
    <title>Essential JS 2 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 Range Slider Control" />
    <meta name="author" content="Syncfusion" />
    <link href="index.css" rel="stylesheet" />
    <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-inputs/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/28.2.3/ej2-popups/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/28.2.3/ej2-buttons/styles/material.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='loader'>Loading....</div>
    <div id='container'>
        <div class="col-lg-12 control-section">
            <div class="content-wrapper" style="margin-bottom: 25px;overflow-x: hidden">
                <div class="form-title">
                    <span>Min</span>
                </div>
                <form id="formMinId" class="form-horizontal">
                    <div class="form-group">
                        <div class="e-float-input">
                            <div id="min-slider" name="min-slider"></div>
                        </div>
                    </div>
                </form>
                <div class="form-title">
                    <span>Max</span>
                </div>
                <form id="formMaxId" class="form-horizontal">
                    <div class="form-group">
                        <div class="e-float-input">
                            <div id="max-slider" name="max-slider"></div>
                        </div>
                    </div>
                </form>
                <div class="form-title">
                    <span>Value</span>
                </div>
                <form id="formValId" class="form-horizontal">
                    <div class="form-group">
                        <div class="e-float-input">
                            <div id="val-slider" name="val-slider"></div>
                        </div>
                    </div>
                </form>
                <div class="form-title">
                    <span>Range</span>
                </div>
                <form id="formRangeId" class="form-horizontal">
                    <div class="form-group">
                        <div class="e-float-input">
                            <div id="range-slider" name="range-slider"></div>
                        </div>
                    </div>
                </form>
                <div class="form-title">
                    <span>Custom</span>
                </div>
                <form id="formCustomId" class="form-horizontal">
                    <div class="form-group">
                        <div class="e-float-input">
                            <div id="custom-slider" name="custom-slider"></div>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>
    <style>
        .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;
        }
    </style>
</body>

</html>
#container {
    visibility: hidden;
}

#loader {
    color: #008cff;
    font-family: 'Helvetica Neue', 'calibiri';
    font-size: 14px;
    height: 40px;
    left: 45%;
    position: absolute;
    top: 45%;
    width: 30%;
}