All Components
Components

Components / Inputs / API

SliderComponent

Represents the Kendo UI Slider component for Angular (see example).

Selector

kendo-slider

Export Name

Accessible in templates as #kendoSliderInstance="kendoSlider"

Inputs

decrementTitle string

Sets the title of the Decrease button of the Slider.

disabled boolean

Determines whether the component is disabled.

dragHandleTitle string

Changes the title attribute of the drag handle so that it can be localized.

fixedTickWidth number

Sets the width between each two ticks along the track. The value has to be set in pixels.
If no fixedTickWidth is provided, the component automatically adjusts the tick width to
accommodate the elements within the size of the component.

incrementTitle string

Sets the title of the Increase button of the Slider.

largeStep number

Specifies that every nth tick will be large and will have a label.
Accepts positive integer values only.

max number

The maximum value of the Slider. The attribute accepts both integers and floating-point numbers.

min number

The minimum value of the Slider. The attribute accepts both integers and floating-point numbers.

readonly boolean

Determines whether the Slider is in its read-only state.

showButtons boolean

Makes the arrow side buttons of the Slider appear. When showButtons is set to false, the buttons are not displayed.

smallStep number

The step value of the Slider. Accepts positive values only.
Can be both integer or a floating-point number.

tabindex number

Specifies the tabindex of the component.

tickPlacement string

Denotes the location of the tick marks in the Slider.

The available options are:

  • before—Tick marks are located to the top side of the horizontal track or to the left side of a vertical track.
  • after—Tick marks are located to the bottom side of the horizontal track or to the right side of the vertical track.
  • both—Tick marks are located on both sides of the track.
  • none—Tick marks are not visible. The actual elements are not added to the DOM tree.

title (value: number) => string

Defines the title of the ticks. The default title for each tick is its Slider value.
If you use a callback function, the function accepts an argument that holds the value of
the component and returns a string with the new title.

value number

The current value of the Slider when it is initially displayed.
The component can use either NgModel or the value binging, but not both of them at the same time.

vertical boolean

If vertical is set to true, it changes the orientation of the Slider from horizontal to vertical.

Events

blur EventEmitter

Fires each time the input element gets blurred.

focus EventEmitter

Fires each time the user focuses the input element.

valueChange EventEmitter

Fires each time the user selects a new value.

Methods

blur

Blurs the Slider component.

focus

Focuses the Slider component.

@Component({
selector: 'my-app',
template: `
 <button (click)="slider.focus()">Focus</button>
 <kendo-slider #slider></kendo-slider>
`
})
class AppComponent { }
In this article