All Components

Predefined Steps

You can configure the way the Slider divides its range and updates the value by using the step options.

Small Steps

To define the small step of the Slider, use the smallStep property. Based on the min and max values, the Slider splits the track into equal ticks. For example, if the min value is 0 (zero), the max value is 4 (four) and the smallStep is 1 (one), the Slider displays ticks which indicate four steps. If the min value is 2 (two), the max value is 4 (four) and the smallStep is 1 (one), the Slider displays two steps.

The Slider applies the steps whenever the user interacts with the component. When the side arrow buttons are clicked or when the handle is dragged, the Slider value changes with small steps. The smallStep property accepts both integer and float values.

@Component({
    selector: 'my-app',
    template: `
        <kendo-slider [min]="0" [max]="12" [smallStep]="2"></kendo-slider> <br />
        <kendo-slider [min]="0" [max]="12" [smallStep]="4"></kendo-slider> <br />
        <kendo-slider [min]="0" [max]="12" [smallStep]="6"></kendo-slider> <br />
    `
})

class AppComponent {}

Large Steps

To define the large step of the Slider, use the largeStep property. The property specifies that every nth step will render a large tick and a label. The largeStep value determines the step with which the Slider will be updated when the Page Up and Page Down arrow keys are pressed, and has to be a positive integer.

@Component({
    selector: 'my-app',
    template: `
        <div class="row">
            <div class="col-sm-12 col-md-6">
                <kendo-slider [min]="0" [max]="12" [smallStep]="1" [largeStep]="2"></kendo-slider>
            </div>
            <div class="col-sm-12 col-md-6">
                <kendo-slider [min]="0" [max]="12" [smallStep]="2" [largeStep]="2"></kendo-slider>
            </div>
        </div>
    `,
    styles: [`
        .k-slider {
            width: 100%;
        }
    `]
})

class AppComponent {}
In this article