Customizing Slider

Variables

The following table lists the available variables for customization.

Name	Type	Default value	Computed value
$kendo-slider-size	Number	200px	200px
Description The default size of the Slider.
$kendo-slider-tick-size	Number	2px	2px
Description The default size of the Slider tick.
$kendo-slider-alt-size	Number	36px	36px
Description The default size of the Slider's track wrap.
$kendo-slider-font-family	String	var( --kendo-font-family, inherit )	var(--kendo-font-family, inherit)
Description The font family of the Slider.
$kendo-slider-font-size	String	var( --kendo-font-size, inherit )	var(--kendo-font-size, inherit)
Description The font size of the Slider.
$kendo-slider-line-height	String	var( --kendo-line-height, normal )	var(--kendo-line-height, normal)
Description The line height of the Slider.
$kendo-slider-button-offset	Number	22px	22px
Description The offset of the Slider Buttons.
$kendo-slider-button-size	Number	36px	36px
Description The size of the Slider Buttons.
$kendo-slider-button-spacing	Number	($kendo-slider-button-size + $kendo-slider-button-offset)	58px
Description The spacing of the Slider Buttons.
$kendo-slider-button-focus-shadow	Null	null	null
Description The shadow of the focused Slider Buttons.
$kendo-slider-track-thickness	Number	2px	2px
Description The thickness of the Slider track.
$kendo-slider-draghandle-size	Number	14px	14px
Description The size of the Slider drag handle.
$kendo-slider-draghandle-border-width	Number	0px	0px
Description The border width of the Slider drag handle.
$kendo-slider-draghandle-active-scale	Number	1	1
Description The transition scale of the active Slider drag handle.
$kendo-slider-draghandle-active-size	Number	20px	20px
Description The size of the active Slider drag handle.
$kendo-slider-draghandle-bg	String	$kendo-color-primary	var(--kendo-color-primary, #3f51b5)
Description The background color of the Slider drag handle.
$kendo-slider-draghandle-text	String	$kendo-color-primary-contrast	var(--kendo-color-on-primary, #ffffff)
Description The text color of the Slider drag handle.
$kendo-slider-draghandle-border	String	$kendo-color-primary	var(--kendo-color-primary, #3f51b5)
Description The border color of the Slider drag handle.
$kendo-slider-draghandle-gradient	Null	null	null
Description The gradient of the Slider drag handle.
$kendo-slider-draghandle-hover-bg	Null	null	null
Description The background color of the hovered Slider drag handle.
$kendo-slider-draghandle-hover-text	Null	null	null
Description The text color of the hovered Slider drag handle.
$kendo-slider-draghandle-hover-border	Null	null	null
Description The border color of the hovered Slider drag handle.
$kendo-slider-draghandle-hover-gradient	Null	null	null
Description The gradient of the hovered Slider drag handle.
$kendo-slider-draghandle-pressed-bg	Null	null	null
Description The background color of the active Slider drag handle.
$kendo-slider-draghandle-pressed-text	Null	null	null
Description The text color of the active Slider drag handle.
$kendo-slider-draghandle-pressed-border	Null	null	null
Description The border color of the active Slider drag handle.
$kendo-slider-draghandle-pressed-gradient	Null	null	null
Description The gradient of the active Slider drag handle.
$kendo-slider-draghandle-focus-shadow	List	0 0 0 11px if($kendo-enable-color-system, color-mix(in srgb, k-color( primary ) 25%, transparent), rgba( $kendo-color-primary, .25 ))	0 0 0 11px color-mix(in srgb, var(--kendo-color-primary, #3f51b5) 25%, transparent)
Description The shadow of the focused Slider drag handle.
$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 of the Slider.
$kendo-slider-draghandle-transition-speed	Number	.4s	0.4s
Description The transition speed of the Slider drag handle.
$kendo-slider-draghandle-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 drag handle.
$kendo-slider-track-bg	String	if($kendo-enable-color-system, k-color( primary-subtle ), k-try-tint( $kendo-color-primary, 8 ))	var(--kendo-color-primary-subtle, #d1d5ee)
Description The background color of the Slider track.
$kendo-slider-selection-bg	String	$kendo-color-primary	var(--kendo-color-primary, #3f51b5)
Description The background color of the Slider's track selection.
$kendo-slider-disabled-opacity	Number	.65	0.65

Suggested Links

• Styling Overview
• Web Font Icons
• Preview of the Themed Components