Slider CSS API Reference

All Common CSS variables:

    Specific CSS variables for Slider styling:

    • --smart-slider-default-width: Slider default widt.
    • --smart-slider-default-height: Slider default height.
    • --smart-slider-track-size: Slider track size. Horizontal track height = Vertical track width.
    • --smart-slider-thumb-width: Slider thumb width.
    • --smart-slider-thumb-height: Slider thumb height.
    • --smart-slider-tooltip-width: Slider tooltip width.
    • --smart-slider-tooltip-height: Slider tooltip height.
    • --smart-slider-spin-button-width: Slider spin buttons width.
    • --smart-slider-spin-button-height: Slider spin buttons height.
    • --smart-slider-tick-size: Slider tick size. Horizontal Slider tick height = Vertical Slider tick width.
    • --smart-slider-minor-tick-size: Slider minor tick size. Horizontal Slider minor tick height = Vertical Slider minor tick width.

    The following CSS selectors can be used to style Slider:

    • smart-slider - the element itself. Can be used to set width and height for the whole element.
      • .smart-container - a container that holds the inner structure of the element. Normally it shoudn't be used for styling.
        • .smart-scale .smart-scale-near - a DIV element used to draw the near scale of the slider.
        • .smart-track-container - a container for the track and the thumb(s).
          • .smart-spin-button - a smartRepeatButton used to increment the value of the slider. Can be styled like a normal smartRepeatButton.
          • .smart-arrow - a DIV element used for the arrow indicator of the near spin button.
        • .smart-track - a DIV container that holds the fill, thumbs and inner track (used when the ticks are placed on the track).
          • .smart-value - a DIV element that represents the fill ( the value ) of the slider.
          • .smart-track-ticks-container - a DIV element that represents the inner scale of the slider ( when ticksPosition is set to "track").
          • .smart-thumb - a DIV element that represents the first thumb of the slider.
            • .smart-thumb-label - a SPAN element that represents the label of the first thumb used primarily with Material Theme ( showThumbLabel property).
            • .smart-tooltip - a DIV element that represents the tooltip of the first thumb.
              • .smart-tooltip-content - a DIV element that holds the value for the first thumb tooltip.
          • .smart-thumb - a DIV element that represents the second thumb of the slider if enabled ( rangeSlider property).
            • .smart-thumb-label - a SPAN element that represents the label of the second thumb used primarily with Material Theme ( showThumbLabel property).
            • .smart-tooltip - a DIV element that represents the tooltip of the second thumb.
              • .smart-tooltip-content - a DIV element that holds the value for the second thumb tooltip.
        • .smart-spin-button - a smartRepeatButton used to decrement the value of the slider. Can be styled like a normal smartRepeatButton.
          • .smart-arrow - a DIV element used for the arrow indicator of the far spin button.
        • .smart-scale .smart-scale-far - a DIV element used to draw the far scale of the slider.

    Demo

    <style>
        #slider{
                --smart-slider-thumb-width: 15px;
                --smart-slider-thumb-height: 15px;
        }
</style>