New to Kendo UI for Vue? 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 size of the Slider. | |||
| $kendo-slider-alt-size | 26px | ||
Description
The default size of the Slider's track wrap. | |||
| $kendo-slider-spacing | map.get( $kendo-spacing, 2 ) | ||
Description
The spacing of the Slider. | |||
| $kendo-slider-font-family | var( --kendo-font-family, inherit ) | ||
Description
The font family of the Slider. | |||
| $kendo-slider-font-size | var( --kendo-font-size-sm, inherit ) | ||
Description
The font size of the Slider. | |||
| $kendo-slider-line-height | var( --kendo-line-height, normal ) | ||
Description
The 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 | if($kendo-enable-color-system, color-mix(in srgb, k-color( on-app-surface ) 28%, transparent), 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 | if($kendo-enable-color-system, color-mix(in srgb, k-color( on-app-surface ) 28%, transparent), k-get-theme-color-var( neutral-60 )) | ||
Description
The background color of the hovered Slider track. | |||
| $kendo-slider-track-hover-border | inherit | ||
Description
The border color of the hovered Slider track. | |||
| $kendo-slider-track-focus-bg | if($kendo-enable-color-system, color-mix(in srgb, k-color( on-app-surface ) 28%, transparent), k-get-theme-color-var( neutral-60 )) | ||
Description
The background color of the focused Slider track. | |||
| $kendo-slider-track-focus-border | inherit | ||
Description
The border color of the focused Slider track. | |||
| $kendo-slider-selection-bg | if($kendo-enable-color-system, k-color( primary ), k-get-theme-color-var( primary-100 )) | ||
Description
The background color of the Slider's track selection. | |||
| $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 transition scale of the active Slider thumb. | |||
| $kendo-slider-thumb-active-size | null | ||
Description
The size of the active 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 | if($kendo-enable-color-system, k-color( primary ), 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 background color of the hovered Slider thumb. | |||
| $kendo-slider-thumb-hover-text | inherit | ||
Description
The text color of the hovered Slider thumb. | |||
| $kendo-slider-thumb-hover-border | if($kendo-enable-color-system, k-color( primary-hover ), k-get-theme-color-var( primary-120 )) | ||
Description
The border color of the hovered Slider thumb. | |||
| $kendo-slider-thumb-hover-gradient | transparent | ||
Description
The gradient of the hovered Slider thumb. | |||
| $kendo-slider-thumb-active-bg | $kendo-slider-thumb-hover-bg | ||
Description
The background color of the active Slider thumb. | |||
| $kendo-slider-thumb-active-text | inherit | ||
Description
The text color of the active Slider thumb. | |||
| $kendo-slider-thumb-active-border | if($kendo-enable-color-system, k-color( primary-active ), k-get-theme-color-var( primary-130 )) | ||
Description
The border color of the active Slider thumb. | |||
| $kendo-slider-thumb-active-gradient | transparent | ||
Description
The gradient of the active Slider thumb. | |||
| $kendo-slider-thumb-focus-bg | $kendo-slider-thumb-hover-bg | ||
Description
The background color of the focused Slider thumb. | |||
| $kendo-slider-thumb-focus-text | inherit | ||
Description
The text color of the focused Slider thumb. | |||
| $kendo-slider-thumb-focus-border | $kendo-slider-thumb-active-border | ||
Description
The border color of the focused Slider thumb. | |||
| $kendo-slider-thumb-focus-gradient | transparent | ||
Description
The gradient of the focused Slider thumb. | |||
| $kendo-slider-disabled-text | if($kendo-enable-color-system, color-mix(in srgb, k-color( on-app-surface ) 70%, transparent), k-get-theme-color-var( neutral-130 )) | ||
Description
The text color of the disabled Slider. | |||
| $kendo-slider-track-disabled-bg | if($kendo-enable-color-system, color-mix(in srgb, k-color( on-app-surface ) 6%, transparent), k-get-theme-color-var( neutral-20 )) | ||
Description
The background color of the disabled Slider track. | |||
| $kendo-slider-selection-disabled-bg | if($kendo-enable-color-system, color-mix(in srgb, k-color( on-app-surface ) 46%, transparent), k-get-theme-color-var( neutral-90 )) | ||
Description
The background color of the disabled Slider's track selection. | |||
| $kendo-slider-thumb-disabled-border | if($kendo-enable-color-system, color-mix(in srgb, k-color( on-app-surface ) 28%, transparent), 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 of the Slider. | |||
| $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. | |||
