Getting Started with Kendo UI for Angular RangeSlider

The RangeSlider lets the user select ranges by dragging the handles or by clicking on the track.

Basic Usage

The following example demonstrates the RangeSlider in action.

@Component({
    selector: 'my-app',
    template: `
        <p>Choose a Price Range</p>
        <kendo-rangeslider
            [(ngModel)]="value"
            [min]="min"
            [max]="max"
            [smallStep]="smallStep"
            [largeStep]="largeStep"
            ></kendo-rangeslider>
        <p style="margin-top: 20px;">Selected Range {{value[0]}} - {{value[1]}}</p>
    `
})
class AppComponent {
    public value: [number, number] = [50, 100];
    public min: number = 0;
    public max: number = 200;
    public largeStep: number = 2;
    public smallStep: number = 20;
}

Functionality and Features

In this article