All Components

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.

Demos

The following example demonstrates the basic usage of the Slider.

@Component({
    selector: 'my-app',
    template: `
        <kendo-slider
            [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;
}

Configuration

Buttons

When enabled, the side buttons increase or decrease the component value with the predefined step. If the initial value does not directly match to 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.

Showing and Hiding

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

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

Steps

The step is defined through the smallStep property. It splits the track on equal ticks based on the min and max values.

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 indicating 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 steps are applied whenever the user interacts with the Slider. 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.

Ticks

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

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

Tick Title

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

Orientation

The Slider supports two modes of orientation—horizontal and vertical. By default, the component is in horizontal mode. To enable the vertical mode, set the vertical property to true.

When in horizontal mode, the Slider displays the smallest value to the left and the largest to the right. When in vertical mode, the component displays the smallest value at the bottom and the largest at the top.

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

Features

It is possible to disable the Slider by setting the disabled property to true.

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

For detailed information on the Slider configuration, refer to its API documentation.

Forms Support

The example below demonstrates how to use the Slider in a reactive form, using the FormGroup decorator.

    import {
        FormsModule,
        ReactiveFormsModule,
        FormGroup,
        FormControl
    } from '@angular/forms';

    const SliderValidator = minValid => control => {
        return control.value < minValid ? null : {
            valid: false
        }
    };

    @Component({
        selector: 'my-app',
        template: `
            <h4>Only values smaller than 5 are valid</h4>
            <form [formGroup]="form">
                <kendo-slider formControlName="slider" [min]="0" [max]="10" [smallStep]="1"></kendo-slider> <br />
                The form is valid: {{form.controls.slider.valid}}
            </form>
        `
    })
    class AppComponent {
        public form = new FormGroup({
            slider: new FormControl(5, SliderValidator(5))
        })
    }

Keyboard Navigation

The following table lists the keyboard shortcuts supported by the Slider.

SHORTCUT DESCRIPTION
Upper Arrow & Right Arrow keys Increase the displayed Slider value with a small step.
Down Arrow & Left Arrow keys Decrease the displayed Slider value with a small step.
Home Set the Slider to its minimum value.
End Set the Slider to its maximum value.
Tab (Accessibility mode) Focus the handle element.

Accessibility

The Slider is WAI ARIA-accessible through the Tab key. The aria-valuemin, aria-valuemax, and aria-valuetext properties define the accessibility values when the user drags the handle of the Slider or interacts with it through its buttons. The buttons of the Slider are defined by the aria-label attributes. Their value can be set through the incrementTitle and decrementTitle attributes.

Responsiveness

One of the solutions for dynamic resizing in Angular 2 applications is the css-element-queries package. It provides resize events using CSS and can be easily implemented along with the Slider.

For an example of a possible implementation, refer to this GitHub repository.

In this article