All Components

Forms Support

It is possible to use the Slider in template-driven or reactive forms.

Template-Driven Forms

The template-driven forms enable you to bind the value of the Slider to the forms model by using the ngModel directive.

The following example demonstrates how to use the Slider in a template-driven form.

@Component({
    selector: 'my-app',
    template: `
        <form #form="ngForm">
            <div class="example-config">
                <strong>{{ value | json }}</strong>
            </div>
            <label>
              Select value:
                 <kendo-slider
                  name="masked"
                  [min]="0"
                  [max]="10"
                  [smallStep]="2"
                  [(ngModel)]="value"
                >
                </kendo-slider> <br />
              </label>
        </form>
    `
   })
export class AppComponent {
    public value: number = 2;
}

Reactive Forms

The FormGroup provides a way to render reactive forms. For more details, refer to the Angular Documentation.

The following example demonstrates how to use the Slider in a reactive form.

import {
       FormsModule,
       ReactiveFormsModule,
       FormGroup,
       FormControl
   } from '@angular/forms';

   const SliderValidator = minValid => control => {
       return control.value < minValid ? null : {
           valid: false
       }
   };

   @Component({
       selector: 'my-app',
       template: `
       <form [formGroup]="form">
           <div class="example-config">
               <p>Increase or decrease slider value to validate. Only values smaller than 5 are valid.</p>
               <p>The form is valid: <strong>{{form.controls.slider.valid}}</strong></p>
           </div>
           <kendo-slider formControlName="slider" [min]="0" [max]="10" [smallStep]="1"></kendo-slider>
       </form>
       `
   })
   class AppComponent {
       public form = new FormGroup({
           slider: new FormControl(5, SliderValidator(5))
       })
   }
In this article