Slider with ngModel in Angular Range Slider component

24 Jun 2022 / 2 minutes to read

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.

Create simple slider component and binds the value property using ngModel. Refer to the below code snippet.

<ejs-slider class="form-control" id='slider' [ticks]="ticks" [(ngModel)]="slidervalue" name="slider" required #slider="ngModel"></ejs-slider>

Create numeric text box and bind the value using ngModel.

<input type="number" id="name" name="name" class="form-control" required [(ngModel)]="slidervalue" #slider="ngModel">

And name the same variable name in both slider and numeric text box. Which will help to view the two-way binding i.e. changing value in slider will change the numeric textbox value and vice versa.
Initialize the value of the variable in component file, while will be bound to slider and text box initially. The values will be changed synchronously while changing any one (slider or text-box) value.

export class AppComponent {
slidervalue = "30";
  public ticks: Object = {
placement: 'Before',
largeStep: 20,
smallStep: 5,
showSmallTicks: true
  };
}

Source

Preview

app.component.ts

app.module.ts

main.ts

template.html

index.css

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