Slider component supports one and two-way property binding. Slider two way binding can be achieved through ngModel Angular directive.
Follow the below steps to perform two-way binding with ngModel.
<ejs-slider class="form-control" id='slider' [ticks]="ticks" [(ngModel)]="slidervalue" name="slider" required #slider="ngModel"></ejs-slider>
<input type="number" id="name" name="name" class="form-control" required [(ngModel)]="slidervalue" #slider="ngModel">
export class AppComponent {
slidervalue = "30";
public ticks: Object = {
placement: 'Before',
largeStep: 20,
smallStep: 5,
showSmallTicks: true
};
}
import { Component } from '@angular/core';
import { FormGroup } from '@angular/forms';
@Component({
selector: 'my-app',
templateUrl: 'app/template.html',
styleUrls:['index.css']
})
export class AppComponent {
slidervalue = "30";
public ticks: Object = {
placement: 'Before',
largeStep: 20,
smallStep: 5,
showSmallTicks: true
};
}
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import { SliderModule } from '@syncfusion/ej2-angular-inputs';
import { FormsModule } from '@angular/forms';
/**
* Module
*/
@NgModule({
imports: [
BrowserModule,
SliderModule,
FormsModule
],
declarations: [AppComponent],
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);
<div class="container">
<form #sliderForm="ngForm">
<div class="form-group">
<label for="slider">Slider</label>
<br/> <br/> <br/>
<ejs-slider class="form-control" id='slider' [ticks]="ticks" [(ngModel)]="slidervalue" name="slider" required #slider="ngModel"></ejs-slider>
<br/> <br/> <br/>
<input type="number" id="name" name="name" class="form-control" required [(ngModel)]="slidervalue" #slider="ngModel">
</div>
</form>
</div>
.form-control{
border: 0;
box-shadow: none;
}
.ng-valid[required]{
border: none;
}