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 style="height: 300px; text-align: center;">
                <p>EQUALIZER</p>
                <div class="eqSlider">
                    <kendo-slider
                        [vertical]="true"
                        [showButtons]="false"
                        [min]="min"
                        [max]="max"
                        [smallStep]="smallStep"
                        [largeStep]="largeStep"
                        [(ngModel)] = "valuesVertical[0]"
                    ></kendo-slider>
                    <p>{{ valuesVertical[0] }}</p>
                </div>
                <div class="eqSlider">
                    <kendo-slider
                        [vertical]="true"
                        [showButtons]="false"
                        [min]="min"
                        [max]="max"
                        [smallStep]="smallStep"
                        [largeStep]="largeStep"
                        [(ngModel)] = "valuesVertical[1]"
                    ></kendo-slider>
                    <p>{{ valuesVertical[1] }}</p>
                </div>
                <div class="eqSlider">
                    <kendo-slider
                        [vertical]="true"
                        [showButtons]="false"
                        [min]="min"
                        [max]="max"
                        [smallStep]="smallStep"
                        [largeStep]="largeStep"
                        [(ngModel)] = "valuesVertical[2]"
                    ></kendo-slider>
                    <p>{{ valuesVertical[2] }}</p>
                </div>
                <div class="eqSlider">
                    <kendo-slider
                        [vertical]="true"
                        [showButtons]="false"
                        [min]="min"
                        [max]="max"
                        [smallStep]="smallStep"
                        [largeStep]="largeStep"
                        [(ngModel)] = "valuesVertical[3]"
                    ></kendo-slider>
                    <p>{{ valuesVertical[3] }}</p>
                </div>
                <div class="eqSlider">
                    <kendo-slider
                        [vertical]="true"
                        [showButtons]="false"
                        [min]="min"
                        [max]="max"
                        [smallStep]="smallStep"
                        [largeStep]="largeStep"
                        [(ngModel)] = "valuesVertical[4]"
                    ></kendo-slider>
                    <p>{{ valuesVertical[4] }}</p>
                </div>

            </div>
            <div style="text-align: center;">
                <p>BALANCE</p>
                <div>
                    <kendo-slider
                        [fixedTickWidth]="10"
                        [min]="-10"
                        [max]="10"
                        [smallStep]="smallStep"
                        [(ngModel)] = "valueHorizontal"
                    >
                        <kendo-slider-messages
                            increment="Right"
                            decrement="Left"
                        ></kendo-slider-messages>
                    </kendo-slider>
                </div>
                <div>{{ valueHorizontal }}</div>
            </div>
    `,
    styles: [`
        .eqSlider {
            display: inline-block;
            margin: 2em;
            height: 122px;
            vertical-align: top;
        }

        .eqSlider p {
            padding-top: 10px;
        }
    `]
})
class AppComponent {
    public valueHorizontal: number = 0;
    public valuesVertical: number[] = [10, 5, 0, 10, 15];
    public min: number = -20;
    public max: number = 20;
    public largeStep: number = 20;
    public smallStep: number = 1;
}

Functionality and Features

In this article