Components / Inputs / Slider

Getting Started with Kendo UI for Angular Slider

The Slider lets the user increase, decrease, and select predefined values by dragging its handle along the track, or by clicking the side arrow buttons.

Basic Usage

The following example demonstrates the Slider in action.

@Component({
    selector: 'my-app',
    template: `
        <div class="example-wrapper container-fluid">
            <div class="row">
                <div class="col-xs-12 col-sm-6 example-col">
                    <p>Horizontal Slider</p>
                    <kendo-slider
                        [fixedTickWidth]="10"
                        [min]="min"
                        [max]="max"
                        [smallStep]="smallStep"
                        [(ngModel)] = "valueHorizontal"
                    ></kendo-slider>
                </div>
                <div class="col-xs-12 col-sm-6 example-col">
                    <p>Vertical Slider</p>
                    <kendo-slider
                        [fixedTickWidth]="10"
                        [vertical]="true"
                        [min]="min"
                        [max]="max"
                        [smallStep]="smallStep"
                        [(ngModel)] = "valueVertical"
                    ></kendo-slider>
                </div>
            </div>
        </div>
    `
})

class AppComponent {
    public valueHorizontal: number = 5;
    public valueVertical: number = 5;
    public min: number = 0;
    public max: number = 15;
    public smallStep: number = 1;
}

Functionality and Features

In this article