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-inline-size | Number | 20em | 20em |
Description
The default slider size. | |||
| $kendo-slider-block-size | Number | 22px | 22px |
Description
The default slider track wrap size. | |||
| $kendo-slider-spacing | String | k-spacing(2) | var(--kendo-spacing-2, 0.5rem) |
Description
The spacing of the slider. | |||
| $kendo-slider-font-family | Null | null | null |
Description
Font family of the slider. | |||
| $kendo-slider-font-size | Number | $kendo-font-size-md | 1rem |
Description
Font size of the slider. | |||
| $kendo-slider-line-height | Number | $kendo-line-height-md | 1.5 |
Description
Line height of the slider. | |||
| $kendo-slider-track-size | String | k-spacing(1) | var(--kendo-spacing-1, 0.25rem) |
Description
The size of the slider track. | |||
| $kendo-slider-track-border-radius | String | k-spacing(1) | var(--kendo-spacing-1, 0.25rem) |
Description
The border radius of the slider track. | |||
| $kendo-slider-thumb-size | String | k-spacing(4) | var(--kendo-spacing-4, 1rem) |
Description
The default size of the slider thumb. | |||
| $kendo-slider-thumb-border-width | String | k-spacing(0.5) | var(--kendo-spacing-0\.5, 0.125rem) |
Description
The default border width of the slider thumb. | |||
| $kendo-slider-thumb-border-radius | Number | 9999px | 9999px |
Description
The border radius of the slider thumb. | |||
| $kendo-slider-thumb-active-scale | Null | null | null |
Description
The active transition scale of the slider thumb. | |||
| $kendo-slider-thumb-active-size | Null | null | null |
Description
The active size of the slider thumb. | |||
| $kendo-slider-transition-speed | Number | .3s | 0.3s |
Description
The transition speed of the slider. | |||
| $kendo-slider-transition-function | String | ease-out | ease-out |
Description
The transition function function. | |||
| $kendo-slider-thumb-transition-speed | Number | .4s | 0.4s |
Description
The transition speed of the slider thumb. | |||
| $kendo-slider-thumb-transition-function | String | cubic-bezier(.25, .8, .25, 1) | cubic-bezier(0.25, 0.8, 0.25, 1) |
Description
The transition function of the slider thumb. | |||
