All Components
Components

Components / Inputs / Slider

Slider Overview

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

Features

The Slider delivers the following features:

In this article