Slider validation using template-driven forms in Angular Range Slider component

import { Component, ViewEncapsulation, ViewChild } from '@angular/core';
import { SliderModule } from '@syncfusion/ej2-angular-inputs';
import {NgForm} from '@angular/forms';

@Component({
selector: 'my-app',
templateUrl: 'app/template.html',
styleUrls:['index.css'],
encapsulation: ViewEncapsulation.None
})

export class AppComponent {
   value; validated;
  @ViewChild('sliderForm') form: NgForm;
 onSubmit() {
   this.validated = true;
   console.log(this.form.valid)
  }

  ngOnInit() {
   this.value =70;
 }
}

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import { SliderValidaton } from './sliderValidation';
import { SliderModule } from '@syncfusion/ej2-angular-inputs';
import { FormsModule } from '@angular/forms';

/**
 * Module
 */
@NgModule({
    imports: [
        BrowserModule,
        SliderModule,
        FormsModule
    ],
    declarations: [AppComponent, SliderValidaton],
    bootstrap: [AppComponent]
})
export class AppModule { }

import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { enableProdMode } from '@angular/core';
import { AppModule } from './app.module';

enableProdMode();
platformBrowserDynamic().bootstrapModule(AppModule);

import { Directive } from '@angular/core';
import { NG_VALIDATORS, FormControl, Validator, ValidationErrors } from '@angular/forms';

@Directive({
    selector: '[slider-validate]',
    providers: [{ provide: NG_VALIDATORS, useExisting: SliderValidaton, multi: true }]
})


export class SliderValidaton implements Validator {
    validate(c: FormControl): ValidationErrors {
        const isValid = c.value > 10;
        return isValid ? null : 'not valid';
    }
}

<div class="container">
	<form #sliderForm="ngForm" (ngSubmit)="onSubmit()">
		<div class="form-group">
			<label for="slider">Slider</label>
		<ejs-slider name = "slider" id='default' type="MinRange" slider-validate [(ngModel)] ='value' 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 {{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: {{value}}
			</div>
		</div>

	</form>
</div>

.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;
}