New to Kendo UI for Angular? Start a free 30-day trial
Customizing Slider
Variables
The following table lists the available variables for customization.
| Name | Type | Default value | Computed value |
|---|---|---|---|
| $kendo-slider-size | 200px | ||
Description
The default slider size. | |||
| $kendo-slider-alt-size | 26px | ||
Description
The default slider track wrap size. | |||
| $kendo-slider-spacing | map.get( $kendo-spacing, 2 ) | ||
Description
The spacing of the slider. | |||
| $kendo-slider-font-family | var( --kendo-font-family, inherit ) | ||
Description
Font family of the slider. | |||
| $kendo-slider-font-size | var( --kendo-font-size-sm, inherit ) | ||
Description
Font size of the slider. | |||
| $kendo-slider-line-height | var( --kendo-line-height, normal ) | ||
Description
Line height of the slider. | |||
| $kendo-slider-text | inherit | ||
Description
The text color of the slider. | |||
| $kendo-slider-track-size | map.get( $kendo-spacing, 1 ) | ||
Description
The size of the slider track. | |||
| $kendo-slider-track-border-radius | map.get( $kendo-spacing, 0.5 ) | ||
Description
The border radius of the slider track. | |||
| $kendo-slider-track-bg | k-get-theme-color-var( neutral-60 ) | ||
Description
The background color of the slider track. | |||
| $kendo-slider-track-border | inherit | ||
Description
The border color of the slider track. | |||
| $kendo-slider-track-hover-bg | k-get-theme-color-var( neutral-60 ) | ||
Description
The hover background color of the slider track. | |||
| $kendo-slider-track-hover-border | inherit | ||
Description
The hover border color of the slider track. | |||
| $kendo-slider-track-focus-bg | k-get-theme-color-var( neutral-60 ) | ||
Description
The focus background color of the slider track. | |||
| $kendo-slider-track-focus-border | inherit | ||
Description
The focus border color of the slider track. | |||
| $kendo-slider-selection-bg | k-get-theme-color-var( primary-100 ) | ||
Description
The selection background color of the slider track. | |||
| $kendo-slider-thumb-size | 16px | ||
Description
The default size of the slider thumb. | |||
| $kendo-slider-thumb-border-width | map.get( $kendo-spacing, 0.5 ) | ||
Description
The default border width of the slider thumb. | |||
| $kendo-slider-thumb-border-radius | 999em | ||
Description
The border radius of the slider thumb. | |||
| $kendo-slider-thumb-active-scale | null | ||
Description
The active transition scale of the slider thumb. | |||
| $kendo-slider-thumb-active-size | null | ||
Description
The active size of the slider thumb. | |||
| $kendo-slider-thumb-bg | var( --kendo-component-bg, transparent ) | ||
Description
The background color of the slider thumb. | |||
| $kendo-slider-thumb-text | inherit | ||
Description
The text color of the slider thumb. | |||
| $kendo-slider-thumb-border | k-get-theme-color-var( primary-100 ) | ||
Description
The border color of the slider thumb. | |||
| $kendo-slider-thumb-gradient | transparent | ||
Description
The gradient of the slider thumb. | |||
| $kendo-slider-thumb-hover-bg | $kendo-slider-thumb-bg | ||
Description
The hover background color of the slider thumb. | |||
| $kendo-slider-thumb-hover-text | inherit | ||
Description
The hover text color of the slider thumb. | |||
| $kendo-slider-thumb-hover-border | k-get-theme-color-var( primary-120 ) | ||
Description
The hover border color of the slider thumb. | |||
| $kendo-slider-thumb-hover-gradient | transparent | ||
Description
The hover gradient of the slider thumb. | |||
| $kendo-slider-thumb-active-bg | $kendo-slider-thumb-hover-bg | ||
Description
The active background color of the slider thumb. | |||
| $kendo-slider-thumb-active-text | inherit | ||
Description
The active text color of the slider thumb. | |||
| $kendo-slider-thumb-active-border | k-get-theme-color-var( primary-130 ) | ||
Description
The active border color of the slider thumb. | |||
| $kendo-slider-thumb-active-gradient | transparent | ||
Description
The active gradient of the slider thumb. | |||
| $kendo-slider-thumb-focus-bg | $kendo-slider-thumb-hover-bg | ||
Description
The focus background color of the slider thumb. | |||
| $kendo-slider-thumb-focus-text | inherit | ||
Description
The focus text color of the slider thumb. | |||
| $kendo-slider-thumb-focus-border | $kendo-slider-thumb-active-border | ||
Description
The focus border color of the slider thumb. | |||
| $kendo-slider-thumb-focus-gradient | transparent | ||
Description
The focus gradient of the slider thumb. | |||
| $kendo-slider-disabled-text | k-get-theme-color-var( neutral-130 ) | ||
Description
The text color of the disabled slider. | |||
| $kendo-slider-track-disabled-bg | k-get-theme-color-var( neutral-20 ) | ||
Description
The background color of the disabled slider track. | |||
| $kendo-slider-selection-disabled-bg | k-get-theme-color-var( neutral-90 ) | ||
Description
The selection background color of the disabled slider track. | |||
| $kendo-slider-thumb-disabled-border | k-get-theme-color-var( neutral-60 ) | ||
Description
The background color of the disabled slider thumb. | |||
| $kendo-slider-transition-speed | .3s | ||
Description
The transition speed of the slider. | |||
| $kendo-slider-transition-function | ease-out | ||
Description
The transition function function. | |||
| $kendo-slider-thumb-transition-speed | .4s | ||
Description
The transition speed of the slider thumb. | |||
| $kendo-slider-thumb-transition-function | cubic-bezier(.25, .8, .25, 1) | ||
Description
The transition function of the slider thumb. | |||
