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.

Basic Usage

The following example demonstrates the Slider in action.

@Component({
    selector: 'my-app',
    template: `
        <div class="example-wrapper container-fluid">
            <div class="row">
                <div class="col-xs-12 col-sm-6 example-col">
                    <p>Horizontal Slider</p>
                    <kendo-slider
                        [fixedTickWidth]="10"
                        [min]="min"
                        [max]="max"
                        [smallStep]="smallStep"
                        [(ngModel)] = "valueHorizontal"
                    ></kendo-slider>
                </div>
                <div class="col-xs-12 col-sm-6 example-col">
                    <p>Vertical Slider</p>
                    <kendo-slider
                        [fixedTickWidth]="10"
                        [vertical]="true"
                        [min]="min"
                        [max]="max"
                        [smallStep]="smallStep"
                        [(ngModel)] = "valueVertical"
                    ></kendo-slider>
                </div>
            </div>
        </div>
    `
})

class AppComponent {
    public valueHorizontal: number = 5;
    public valueVertical: number = 5;
    public min: number = 0;
    public max: number = 15;
    public smallStep: number = 1;
}

Configuration

The Slider provides configuration options for:

Enable and Disable

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.

Set the 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 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.

When setting the side buttons, the Slider provides configuration options for:

Show and Hide Side Buttons

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

Set the Side Button Title

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

Set the 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:

Manage the Tick 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;
}

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

Define the Tick 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;
}

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

Manage Predefined 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.

Forms Support

It is possible to use the Slider in reactive forms.

Reactive Forms

The FormGroup provides a way to render reactive forms. For more details, refer to the Angular Documentation.

The following example demonstrates how to use the Slider in a reactive form.

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

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

   @Component({
       selector: 'my-app',
       template: `
       <form [formGroup]="form">   
           <div class="example-config">
               <p>Increase or decrease slider value to validate. Only values smaller than 5 are valid.</p>
               <p>The form is valid: <strong>{{form.controls.slider.valid}}</strong></p>
           </div>
           <kendo-slider formControlName="slider" [min]="0" [max]="10" [smallStep]="1"></kendo-slider>
       </form>
       `
   })
   class AppComponent {
       public form = new FormGroup({
           slider: new FormControl(5, SliderValidator(5))
       })
   }

Responsiveness

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

Keyboard Navigation

For more information on the keyboard shortcuts the Slider supports, refer to the article on keyboard navigation.

Accessibility

For more information on the accessibility features of the Slider, refer to the article on accessibility.

In this article