Sass Variables
The Telerik and Kendo UI Slider enables you to configure and customize its appearance through the available Sass variables. Additionally, to configure and customize the appearance of its buttons, use the Sass variables provided by the Button component.
| Variable | Default Value | Computed Value | Value |
|---|---|---|---|
kendo-slider-size | 200px | 200px | Default: 200pxComputed: 200px |
| Description: The default size of the Slider. | |||
kendo-slider-tick-size | null | null | Default: nullComputed: null |
| Description: The default size of the Slider tick. | |||
kendo-slider-alt-size | 30px | 30px | Default: 30pxComputed: 30px |
| Description: The default size of the Slider's track wrap. | |||
kendo-slider-font-family | var( --kendo-font-family, inherit ) | var(--kendo-font-family, inherit) | Default: var( --kendo-font-family, inherit )Computed: var(--kendo-font-family, inherit) |
| Description: The font family of the Slider. | |||
kendo-slider-font-size | var( --kendo-font-size, inherit ) | var(--kendo-font-size, inherit) | Default: var( --kendo-font-size, inherit )Computed: var(--kendo-font-size, inherit) |
| Description: The font size of the Slider. | |||
kendo-slider-line-height | var( --kendo-line-height, normal ) | var(--kendo-line-height, normal) | Default: var( --kendo-line-height, normal )Computed: var(--kendo-line-height, normal) |
| Description: The line height of the Slider. | |||
kendo-slider-button-offset | 10px | 10px | Default: 10pxComputed: 10px |
| Description: The offset of the Slider Buttons. | |||
kendo-slider-button-size | ($kendo-slider-alt-size - 2) | 28px | Default: ($kendo-slider-alt-size - 2)Computed: 28px |
| Description: The size of the Slider Buttons. | |||
kendo-slider-button-spacing | ($kendo-slider-button-size + $kendo-slider-button-offset) | 38px | Default: ($kendo-slider-button-size + $kendo-slider-button-offset)Computed: 38px |
| Description: The spacing of the Slider Buttons. | |||
kendo-slider-button-focus-shadow | null | null | Default: nullComputed: null |
| Description: The shadow of the focused Slider Buttons. | |||
kendo-slider-track-thickness | 4px | 4px | Default: 4pxComputed: 4px |
| Description: The thickness of the Slider track. | |||
kendo-slider-draghandle-size | 14px | 14px | Default: 14pxComputed: 14px |
| Description: The size of the Slider drag handle. | |||
kendo-slider-draghandle-border-width | 1px | 1px | Default: 1pxComputed: 1px |
| Description: The border width of the Slider drag handle. | |||
kendo-slider-draghandle-active-scale | 1 | 1 | Default: 1Computed: 1 |
| Description: The transition scale of the active Slider drag handle. | |||
kendo-slider-draghandle-active-size | null | null | Default: nullComputed: null |
| Description: The size of the active Slider drag handle. | |||
kendo-slider-draghandle-bg | $kendo-color-primary | var(--kendo-color-primary, #ff6358) | Default: $kendo-color-primaryComputed: var(--kendo-color-primary, #ff6358) |
| Description: The background color of the Slider drag handle. | |||
kendo-slider-draghandle-text | if($kendo-enable-color-system, k-color( on-primary ), k-contrast-legacy( $kendo-color-primary )) | var(--kendo-color-on-primary, #ffffff) | Default: if($kendo-enable-color-system, k-color( on-primary ), k-contrast-legacy( $kendo-color-primary ))Computed: var(--kendo-color-on-primary, #ffffff) |
| Description: The text color of the Slider drag handle. | |||
kendo-slider-draghandle-border | $kendo-color-primary | var(--kendo-color-primary, #ff6358) | Default: $kendo-color-primaryComputed: var(--kendo-color-primary, #ff6358) |
| Description: The border color of the Slider drag handle. | |||
kendo-slider-draghandle-gradient | null | null | Default: nullComputed: null |
| Description: The gradient of the Slider drag handle. | |||
kendo-slider-draghandle-hover-bg | if($kendo-enable-color-system, k-color( primary-hover ), k-try-shade( $kendo-color-primary , .5 )) | var(--kendo-color-primary-hover, #ea5a51) | Default: if($kendo-enable-color-system, k-color( primary-hover ), k-try-shade( $kendo-color-primary , .5 ))Computed: var(--kendo-color-primary-hover, #ea5a51) |
| Description: The background color of the hovered Slider drag handle. | |||
kendo-slider-draghandle-hover-text | null | null | Default: nullComputed: null |
| Description: The text color of the hovered Slider drag handle. | |||
kendo-slider-draghandle-hover-border | $kendo-color-primary | var(--kendo-color-primary, #ff6358) | Default: $kendo-color-primaryComputed: var(--kendo-color-primary, #ff6358) |
| Description: The border color of the hovered Slider drag handle. | |||
kendo-slider-draghandle-hover-gradient | null | null | Default: nullComputed: null |
| Description: The gradient of the hovered Slider drag handle. | |||
kendo-slider-draghandle-pressed-bg | if($kendo-enable-color-system, k-color( primary-active ), k-try-shade( $kendo-color-primary , 1.5 )) | var(--kendo-color-primary-active, #d45349) | Default: if($kendo-enable-color-system, k-color( primary-active ), k-try-shade( $kendo-color-primary , 1.5 ))Computed: var(--kendo-color-primary-active, #d45349) |
| Description: The background color of the active Slider drag handle. | |||
kendo-slider-draghandle-pressed-text | null | null | Default: nullComputed: null |
| Description: The text color of the active Slider drag handle. | |||
kendo-slider-draghandle-pressed-border | if($kendo-enable-color-system, k-color( primary-active ), k-try-shade( $kendo-color-primary , 1.5 )) | var(--kendo-color-primary-active, #d45349) | Default: if($kendo-enable-color-system, k-color( primary-active ), k-try-shade( $kendo-color-primary , 1.5 ))Computed: var(--kendo-color-primary-active, #d45349) |
| Description: The border color of the active Slider drag handle. | |||
kendo-slider-draghandle-pressed-gradient | null | null | Default: nullComputed: null |
| Description: The gradient of the active Slider drag handle. | |||
kendo-slider-draghandle-focus-shadow | 0 0 0 2px if($kendo-enable-color-system, color-mix(in srgb, k-color( primary ) 30%, transparent), rgba( $kendo-color-primary , .3 )) | (0 0 0 2px color-mix(in srgb, var(--kendo-color-primary, #ff6358) 30%, transparent)) | Default: 0 0 0 2px if($kendo-enable-color-system, color-mix(in srgb, k-color( primary ) 30%, transparent), rgba( $kendo-color-primary , .3 ))Computed: (0 0 0 2px color-mix(in srgb, var(--kendo-color-primary, #ff6358) 30%, transparent)) |
| Description: The shadow of the focused Slider drag handle. | |||
kendo-slider-transition-speed | .3s | 0.3s | Default: .3sComputed: 0.3s |
| Description: The transition speed of the Slider. | |||
kendo-slider-transition-function | ease-out | ease-out | Default: ease-outComputed: ease-out |
| Description: The transition function of the Slider. | |||
kendo-slider-draghandle-transition-speed | .4s | 0.4s | Default: .4sComputed: 0.4s |
| Description: The transition speed of the Slider drag handle. | |||
kendo-slider-draghandle-transition-function | cubic-bezier(.25, .8, .25, 1) | cubic-bezier(0.25, 0.8, 0.25, 1) | Default: cubic-bezier(.25, .8, .25, 1)Computed: cubic-bezier(0.25, 0.8, 0.25, 1) |
| Description: The transition function of the Slider drag handle. | |||
kendo-slider-track-bg | if($kendo-enable-color-system, k-color( base-emphasis ), k-try-shade( $kendo-component-bg, 1 )) | var(--kendo-color-base-emphasis, #c2c2c2) | Default: if($kendo-enable-color-system, k-color( base-emphasis ), k-try-shade( $kendo-component-bg, 1 ))Computed: var(--kendo-color-base-emphasis, #c2c2c2) |
| Description: The background color of the Slider track. | |||
kendo-slider-selection-bg | $kendo-color-primary | var(--kendo-color-primary, #ff6358) | Default: $kendo-color-primaryComputed: var(--kendo-color-primary, #ff6358) |
| Description: The background color of the Slider's track selection. | |||
kendo-slider-disabled-opacity | null | null | Default: nullComputed: null |
| Description: | |||
kendo-slider-tick-horizontal-image | "data:image/gif;base64,R0lGODlhAQC0AIABALi4uAAAACH5BAEAAAEALAAAAAABALQAAAIWjIGJxqzazlux2ovlzND2rAHgSIZWAQA7" | "data:image/gif;base64,R0lGODlhAQC0AIABALi4uAAAACH5BAEAAAEALAAAAAABALQAAAIWjIGJxqzazlux2ovlzND2rAHgSIZWAQA7" | Default: "data:image/gif;base64,R0lGODlhAQC0AIABALi4uAAAACH5BAEAAAEALAAAAAABALQAAAIWjIGJxqzazlux2ovlzND2rAHgSIZWAQA7"Computed: "data:image/gif;base64,R0lGODlhAQC0AIABALi4uAAAACH5BAEAAAEALAAAAAABALQAAAIWjIGJxqzazlux2ovlzND2rAHgSIZWAQA7" |
| Description: The background image of the horizontal Slider tick. | |||
kendo-slider-tick-vertical-image | "data:image/gif;base64,R0lGODlhtAABAIABALi4uAAAACH5BAEAAAEALAAAAAC0AAEAAAIWjIGJxqzazlux2ovlzND2rAHgSIZWAQA7" | "data:image/gif;base64,R0lGODlhtAABAIABALi4uAAAACH5BAEAAAEALAAAAAC0AAEAAAIWjIGJxqzazlux2ovlzND2rAHgSIZWAQA7" | Default: "data:image/gif;base64,R0lGODlhtAABAIABALi4uAAAACH5BAEAAAEALAAAAAC0AAEAAAIWjIGJxqzazlux2ovlzND2rAHgSIZWAQA7"Computed: "data:image/gif;base64,R0lGODlhtAABAIABALi4uAAAACH5BAEAAAEALAAAAAC0AAEAAAIWjIGJxqzazlux2ovlzND2rAHgSIZWAQA7" |
| Description: The background image of the vertical Slider tick. | |||
