• Getting Started
  • Components
    • Barcodes
    • Buttons
    • Chart Wizardnew
    • Charts
    • Conversational UI
    • Data Query
    • Date Inputsupdated
    • Date Math
    • Dialogs
    • Drawing
    • Dropdownsupdated
    • Editor
    • Excel Export
    • File Saver
    • Filter
    • Gantt
    • Gauges
    • Gridupdated
    • Icons
    • Indicators
    • Inputs
    • Labels
    • Layout
    • ListBoxupdated
    • ListView
    • Map
    • Menus
    • Navigation
    • Notification
    • Pager
    • PDF Export
    • PDFViewer
    • PivotGridupdated
    • Popup
    • ProgressBars
    • Ripple
    • Scheduler
    • ScrollView
    • Sortable
    • Spreadsheet
    • ToolBar
    • Tooltips
    • TreeList
    • TreeView
    • Typography
    • Uploadsupdated
    • Utilities
  • Styling & Themes
  • Common Features
  • Project Setup
  • Knowledge Base
  • Sample Applications
  • FAQ
  • Troubleshooting
  • Updates
  • Changelogs
Components / Inputs / API / SliderComponent / 
New to Kendo UI for Angular? Start a free 30-day trial

SliderComponent

Represents the Kendo UI Slider component for Angular.

Selector

kendo-slider

Export Name

Accessible in templates as #kendoSliderInstance="kendoSlider"

Inputs

NameTypeDefaultDescription

animate

boolean

Determines if the animation will be played on value change. Regardless of this setting, no animation will be played during the initial rendering.

decrementTitle

string

Sets the title of the Decrease button of the Slider (see example).

disabled

boolean

Determines whether the Slider is disabled (see example). To learn how to disable the component in reactive forms, refer to the article on Forms Support.

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 (see example). The value has to be set in pixels. If no fixedTickWidth is provided, the Slider 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 (see example).

largeStep

number

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

max

number

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

min

number

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

readonly

boolean

false

Determines whether the Slider is in its read-only state (see example).

showButtons

boolean

Renders the arrow side buttons of the Slider (see example). When showButtons is set to false, the buttons are not displayed.

smallStep

number

The step value of the Slider (see example). Accepts positive values only. Can be an integer or a floating-point number.

tabindex

number

Specifies the tabindex of the Slider.

tickPlacement

string

Denotes the location of the tick marks in the Slider (see example).

The available options are:

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

title

SliderTickTitleCallback

Defines the title of the ticks (see example). 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 binding but not both of them at the same time.

vertical

boolean

If vertical is set to true, the orientation of the Slider changes from horizontal to vertical (see example).

Events

NameTypeDescription

blur

EventEmitter<any>

Fires each time the component is blurred.

focus

EventEmitter<any>

Fires each time the user focuses the component.

valueChange

EventEmitter<any>

Fires each time the user selects a new value.

Methods

blur

Blurs the Slider.

focus

Focuses the Slider.

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

In this article

Not finding the help you need?

Contact Support