How to use slider in reactive form in Angular Slider

25 Sep 20266 minutes to read

Implement Angular Slider validation within Angular Reactive forms to enforce validation rules and provide real-time feedback. The following sample demonstrates Angular Slider state tracking using Angular form validation classes.

Follow the steps below to integrate and validate a slider within a reactive form.

  • Create simple Angular reactive form. And add simple Angular Slider component within form.

  • Create form group with Angular Slider.

     sliderForm: FormGroup;
  constructor(fb: FormBuilder) {
    this.value = 30;
    this.sliderForm = fb.group({
    'slider': [0, Validators.min(10)]
  });
}

  • Show the validation message, based on validation classes which is added to Angular Slider. Refer below code snippet.

Class if true Class if false state
ng-touched ng-untouched The control has been visited.
ng-dirty ng-pristine The control’s value has changed.
ng-valid ng-invalid The control’s value is valid. 

<div *ngIf="sliderForm.invalid">
slider has <b><i>invalid </i> </b> value and choose value greater than 10.
</div><br/>
<div *ngIf="sliderForm.valid">
Slider has <b><i>valid </i> </b> value .
</div><br/>
<div *ngIf="sliderForm.pristine">
Slider having state <b><i>pristine.</i></b> Slider value not yet changed by user. <br/>
</div>
<div *ngIf="sliderForm.dirty">
Slider having state <b><i>dirty.</i> </b> Slider value changed by user.
</div>
<br/>
<button [disabled]="sliderForm.invalid"  type="submit">submit</button><br/><br/>
<div class="formresult" [hidden]="!validated">
Slider value choosen as: 
</div>


import { NgModule } from '@angular/core'
import { BrowserModule } from '@angular/platform-browser'
import { SliderModule } from '@syncfusion/ej2-angular-inputs'
import { FormsModule, ReactiveFormsModule } from '@angular/forms'
import { Component, Inject } from '@angular/core';
import { FormGroup, FormBuilder, Validators } from '@angular/forms';
import { SliderComponent } from '@syncfusion/ej2-angular-inputs';
import { CommonModule } from '@angular/common';

@Component({
  imports: [
    SliderModule,CommonModule,
    FormsModule, ReactiveFormsModule
  ],
  standalone: true,
  selector: 'my-app',
  template: `
    <div class="container">
      <form [formGroup]="sliderForm" (ngSubmit)="onSubmit()">
        <div class="form-group">
          <label for="slider">Slider</label>
          <ejs-slider formControlName="slider" id='sliderelement' [(ngModel)]="value" type="MinRange" required></ejs-slider>
    
          <div *ngIf="sliderForm.invalid">
            slider has <b><i>invalid </i> </b> value and choose value greater than 10.
          </div>
          <div *ngIf="sliderForm.valid">
            Slider has <b><i>valid </i> </b> value .
          </div><br/>
          <div *ngIf="sliderForm.pristine">
            Slider having state <b><i>pristine.</i></b> Slider value not yet changed by user.
          </div>
          <div *ngIf="sliderForm.dirty">
            Slider having state <b><i>dirty.</i> </b> Slider value changed by user.
          </div><br/>
          <div *ngIf="sliderForm.untouched">
            Slider having state <b><i>untouched.</i></b> Slider has not visited by user.
          </div>
          <div *ngIf="sliderForm.touched">
            Slider having state <b><i>touched.</i> </b> Slider has been visited by user.
          </div>
          <br/>
          <button [disabled]="sliderForm.invalid"  type="submit">submit</button><br/><br/>
          <div class="formresult" [hidden]="!validated">
          Slider value choosen as: 
          </div>
        </div>
      </form>
    </div>`,
})

export class AppComponent {
  value;
  slidervalue?: SliderComponent;
  validated = false;
  sliderForm: FormGroup;
  constructor(@Inject(FormBuilder) public fb: FormBuilder) {
    this.value = 30;
    this.sliderForm = this.fb.group({
      'slider': [0, Validators.min(10)]
    });
  }
  onSubmit() {
    if (this.sliderForm.valid) {
      this.validated = true;
      console.log('form submitted');
      console.log(this.sliderForm.value.slider);
    }

  }
}
@import 'node_modules/@syncfusion/ej2-base/styles/material3.css';
@import 'node_modules/@syncfusion/ej2-buttons/styles/material3.css';
@import 'node_modules/@syncfusion/ej2-popups/styles/material3.css';
@import 'node_modules/@syncfusion/ej2-angular-inputs/styles/material3.css';

.ng-valid[required] {
    border-left: 5px solid #42A948;
    /* green */
}

.ng-invalid:not(form) {
    border-left: 5px solid #a94442;
    /* red */
}

.e-slider-container .e-slider {
    /* csslint ignore:start */
    border-left-color: transparent !important;
    /* csslint ignore:end */
}

.formresult {
    padding-bottom: 10px;
    padding-top: 10px;
    background-color: blanchedalmond;
    text-align: center;
}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
bootstrapApplication(AppComponent).catch((err) => console.error(err));