Slider CSS API Reference

All Common CSS variables:

  • --smart-primary: The theme primary color.
  • --smart-primary-color: Text color on top of a primary background.
  • --smart-secondary: The theme secondary color.
  • --smart-secondary-color: Text color on top of a secondary background.
  • --smart-error: The theme error color.
  • --smart-error-color: Text color on top of a error background.
  • --smart-success: The theme success color.
  • --smart-success-color: Text color on top of a success background.
  • --smart-background: The theme background color. The background color appears behind scrollable content.
  • --smart-background-color: Text color on top of a background background.
  • --smart-surface: The theme surface color. Surface colors affect surfaces of components, such as cards, sheets, and menus.
  • --smart-surface-color: Text color on top of a surface surface.
  • --smart-disabled: The theme primary color in disabled state.
  • --smart-disabled-color: Text color on top of a theme background in disabled state.
  • --smart-ui-state-hover: Hover state background.
  • --smart-ui-state-color-hover: Text color, when UI Element's state is 'hover'.
  • --smart-ui-state-border-hover: Border color, when UI Element's state is 'hover'.
  • --smart-ui-state-active: Active state background.
  • --smart-ui-state-color-active: Text color, when UI Element's state is 'active'.
  • --smart-ui-state-border-active: Border color, when UI Element's state is 'active'.
  • --smart-ui-state-focus: Focus state background.
  • --smart-ui-state-color-focus: Text color, when UI Element's state is 'focus'.
  • --smart-ui-state-border-focus: Border color, when UI Element's state is 'focus'.
  • --smart-ui-state-selected: Selected state background.
  • --smart-ui-state-color-selected: Text color, when UI Element's state is 'selected'.
  • --smart-ui-state-border-selected: Border color, when UI Element's state is 'selected'.
  • --smart-item-border-width: Border width of items.
  • --smart-item-border-radius: Border radius of items.
  • --smart-item-border-top-left-radius: Border top-left radius of items.
  • --smart-item-border-top-right-radius: Border top-right radius of items.
  • --smart-item-border-bottom-left-radius: Border bottom-left radius of items.
  • --smart-item-border-bottom-right-radius: Border bottom-right radius of items.
  • --smart-font-size: Theme font-size.
  • --smart-font-family: Theme font-family.
  • --smart-font-family-icon: Theme icons font-family.
  • --smart-border-width: Theme border-width.
  • --smart-border-radius: Theme border-radius.
  • --smart-border-top-left-radius: Border top-left radius.
  • --smart-border-top-right-radius: Border top-right radius.
  • --smart-border-bottom-left-radius: Border bottom-left radius.
  • --smart-border-bottom-right-radius: Border bottom-right radius.
  • --smart-border: The theme border settings.
  • --smart-outline: The theme border color.
  • --smart-arrow-size: Font size of the arrow elements.
  • --smart-editor-selection: Background color of the selected text.
  • --smart-editor-selection-color: Color of the selected text.
  • --smart-alternation-index0-color: Alternation color for index0.
  • --smart-alternation-index0-border-color: Alternation border color for index0.
  • --smart-alternation-index0-background: Alternation background color for index0.
  • --smart-alternation-index1-color: Alternation color for index1.
  • --smart-alternation-index1-border-color: Alternation border color for index1.
  • --smart-alternation-index1-background: Alternation background color for index1.
  • --smart-alternation-index2-color: Alternation color for index2.
  • --smart-alternation-index2-border-color: Alternation border color for index2.
  • --smart-alternation-index2-background: Alternation background color for index2.
  • --smart-tick-color: Default tick color for smartTank, smartSlider and smartGauge.
  • --smart-tick-label-color: Default tick label color for smartTank, smartSlider and smartGauge.
  • --smart-box-height: Default height for Dialog, Gauge, Accordion, Tabs, Tree, Array.
  • --smart-box-width: Default width for Dialog, Gauge, Accordion, Tabs, Tree, Array.
  • --smart-bar-height: Default height for headers and footers.
  • --smart-bar-width: Default width for headers and footers.
  • --smart-editor-height: Default height for editors.
  • --smart-editor-width: Default width for editors.
  • --smart-editor-drop-down-width: Default width for editors drop-down.
  • --smart-editor-drop-down-height: Default height for editors drop-down.
  • --smart-editor-label-padding: Default padding for inputs.
  • --smart-editor-addon-width: Default width for spin buttons, dropdown buttons.

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>
Feedback & Questions