Search results

Slider with ngModel in Angular Range Slider component

15 Oct 2021 / 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.
Copied to clipboard
<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.
Copied to clipboard
<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.
Copied to clipboard
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
Copied to clipboard
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
  };
}
Copied to clipboard
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 { }
Copied to clipboard
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { enableProdMode } from '@angular/core';
import { AppModule } from './app.module';

enableProdMode();
platformBrowserDynamic().bootstrapModule(AppModule);
Copied to clipboard
<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>
Copied to clipboard
.form-control{
  border: 0;
  box-shadow: none;
}


.ng-valid[required]{
  border: none;
}