All Components

Side Buttons

You can use the configuration options of the Slider to manage the settings of its side buttons.

When enabled, the side buttons increase or decrease the component value with the predefined step. If the initial value does not directly match a specific tick and the user clicks either of the buttons, the handle is placed on the next available tick. Each subsequent click moves the handle over the available ticks.

The Slider provides configuration options for:

Hidden State

By default, the showButtons property is set to true. To hide the buttons, set the property to false.

@Component({
    selector: 'my-app',
    template: `
        <kendo-slider
            [showButtons]="showButtons"
            [min]="min"
            [max]="max"
            [smallStep]="smallStep"
            [(ngModel)] = "value"
        ></kendo-slider>
    `
})

class AppComponent {
    public showButtons: boolean = false;
    public value: number = 5;
    public min: number = 0;
    public max: number = 10;
    public smallStep: number = 1;
}

Titles

The titles of the buttons can be controlled by using the decrementTitle and incrementTitle properties, which accept string parameters.

@Component({
    selector: 'my-app',
    template: `
        <kendo-slider
            [incrementTitle]="'Inc'"
            [decrementTitle]="'Dec'"
            [min]="min"
            [max]="max"
            [smallStep]="smallStep"
            [(ngModel)] = "value"
        ></kendo-slider>
    `
})

class AppComponent {
    public value: number = 5;
    public min: number = 0;
    public max: number = 10;
    public smallStep: number = 1;
}
In this article