New to Kendo UI for Angular? Start a free 30-day trial

Customizing Slider

Variables

The following table lists the available variables for customization.

NameTypeDefault valueComputed value
$kendo-slider-sizeNumber200px200px
Description
The default size of the Slider.
$kendo-slider-tick-sizeNullnullnull
Description
The default size of the Slider tick.
$kendo-slider-alt-sizeNumber30px30px
Description
The default size of the Slider's track wrap.
$kendo-slider-font-familyStringvar( --kendo-font-family, inherit )var(--kendo-font-family, inherit)
Description
The font family of the Slider.
$kendo-slider-font-sizeStringvar( --kendo-font-size, inherit )var(--kendo-font-size, inherit)
Description
The font size of the Slider.
$kendo-slider-line-heightStringvar( --kendo-line-height, normal )var(--kendo-line-height, normal)
Description
The line height of the Slider.
$kendo-slider-button-offsetNumber10px10px
Description
The offset of the Slider Buttons.
$kendo-slider-button-sizeNumber($kendo-slider-alt-size - 2)28px
Description
The size of the Slider Buttons.
$kendo-slider-button-spacingNumber($kendo-slider-button-size + $kendo-slider-button-offset)38px
Description
The spacing of the Slider Buttons.
$kendo-slider-button-focus-shadowList$kendo-button-focus-shadow0 0 0 0.25rem color-mix(in srgb, var(--kendo-color-border, rgba(33, 37, 41, 0.13)) 50%, transparent)
Description
The shadow of the focused Slider Buttons.
$kendo-slider-track-thicknessNumber4px4px
Description
The thickness of the Slider track.
$kendo-slider-draghandle-sizeNumber14px14px
Description
The size of the Slider drag handle.
$kendo-slider-draghandle-border-widthNumber1px1px
Description
The border width of the Slider drag handle.
$kendo-slider-draghandle-active-scaleNumber11
Description
The transition scale of the active Slider drag handle.
$kendo-slider-draghandle-active-sizeNullnullnull
Description
The size of the active Slider drag handle.
$kendo-slider-draghandle-bgString$kendo-color-primaryvar(--kendo-color-primary, #0d6efd)
Description
The background color of the Slider drag handle.
$kendo-slider-draghandle-textStringif($kendo-enable-color-system, k-color( on-primary ), k-contrast-color( $kendo-color-primary ))var(--kendo-color-on-primary, #ffffff)
Description
The text color of the Slider drag handle.
$kendo-slider-draghandle-borderString$kendo-color-primaryvar(--kendo-color-primary, #0d6efd)
Description
The border color of the Slider drag handle.
$kendo-slider-draghandle-gradientNullnullnull
Description
The gradient of the Slider drag handle.
$kendo-slider-draghandle-hover-bgStringif($kendo-enable-color-system, k-color( primary-hover ), k-try-darken( $kendo-color-primary, 7.5% ))var(--kendo-color-primary-hover, #0c64e4)
Description
The background color of the hovered Slider drag handle.
$kendo-slider-draghandle-hover-textStringif($kendo-enable-color-system, k-color( on-primary ), k-contrast-color( $kendo-color-primary ))var(--kendo-color-on-primary, #ffffff)
Description
The text color of the hovered Slider drag handle.
$kendo-slider-draghandle-hover-borderStringif($kendo-enable-color-system, k-color( primary-hover ), k-try-darken( $kendo-color-primary, 10% ))var(--kendo-color-primary-hover, #0c64e4)
Description
The border color of the hovered Slider drag handle.
$kendo-slider-draghandle-hover-gradientNullnullnull
Description
The gradient of the hovered Slider drag handle.
$kendo-slider-draghandle-pressed-bgStringif($kendo-enable-color-system, k-color( primary-active ), k-try-darken( $kendo-color-primary, 10% ))var(--kendo-color-primary-active, #0a58ca)
Description
The background color of the active Slider drag handle.
$kendo-slider-draghandle-pressed-textStringif($kendo-enable-color-system, k-color( on-primary ), k-contrast-color( $kendo-color-primary ))var(--kendo-color-on-primary, #ffffff)
Description
The text color of the active Slider drag handle.
$kendo-slider-draghandle-pressed-borderStringif($kendo-enable-color-system, k-color( primary-active ), k-try-darken( $kendo-color-primary, 12.5% ))var(--kendo-color-primary-active, #0a58ca)
Description
The border color of the active Slider drag handle.
$kendo-slider-draghandle-pressed-gradientNullnullnull
Description
The gradient of the active Slider drag handle.
$kendo-slider-draghandle-focus-shadowList0 0 0 3px if($kendo-enable-color-system, color-mix(in srgb, k-color( primary ) 50%, transparent), rgba( $kendo-color-primary, .5 ))0 0 0 3px color-mix(in srgb, var(--kendo-color-primary, #0d6efd) 50%, transparent)
Description
The shadow of the focused Slider drag handle.
$kendo-slider-transition-speedNumber.3s0.3s
Description
The transition speed of the Slider.
$kendo-slider-transition-functionStringease-outease-out
Description
The transition function of the Slider.
$kendo-slider-draghandle-transition-speedNumber.4s0.4s
Description
The transition speed of the Slider drag handle.
$kendo-slider-draghandle-transition-functionStringcubic-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-bgStringif($kendo-enable-color-system, k-color( base-emphasis ), $gray-200)var(--kendo-color-base-emphasis, rgba(33, 37, 41, 0.34))
Description
The background color of the Slider track.
$kendo-slider-selection-bgString$kendo-selected-bgvar(--kendo-color-primary, #0d6efd)
Description
The background color of the Slider's track selection.
$kendo-slider-disabled-opacityNullnullnull

In this article

Not finding the help you need?