All Components

Ticks

Along the track, the ticks indicate the values resulting from each incremented predefined step.

When setting the ticks, the Slider provides configuration options for:

Placement

Ticks are configured through the tickPlacement property. They can be set to appear along the upper or bottom side of a horizontal Slider, on the left or right side of a vertical Slider, or on both sides of the track. It is also possible to configure them not to occur at all.

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

class AppComponent {
    public tickPlacement: string = 'none';
    public value: number = 5;
    public min: number = 0;
    public max: number = 10;
    public smallStep: number = 1;
}

Titles

The title property defines the titles of the ticks. By default, the title of each tick corresponds to its value. To customize the title, use a callback function.

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

class AppComponent {
    public title(value): void {
        return value % 2;
    }

    public value: number = 5;
    public min: number = 0;
    public max: number = 10;
    public smallStep: number = 1;
}

Width

The fixedTickWidth property sets the width between each two ticks along the track. Its value has to be set in pixels. When the property is enabled, the Slider gets resized to fit all ticks with the corresponding width. If fixedTickWidth is not set, the component adjusts the size of the ticks so that the sum matches the actual size of the component.

@Component({
    selector: 'my-app',
    template: `
        <kendo-slider
            [fixedTickWidth]="20"
            [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