Slider CSS Styling

Smart.Slider is a numeric control used to select a numeric value from a range of values by moving a thumb along a track.

Required files

Smart.Slider requires the following scripts to be referenced on a page in order for the custom element to be successfully registered and to work correctly:

  • smart.element.js — this is the base file that defines the common architecture of all Smart custom elements. It is part of the repository ni-kismet/smart-element.
  • smart.tank.js — this file defines the functionality of the Smart.Tank custom element which Smart.Slider extends.
  • smart.slider.js — this file defines the unique functionality of the Smart.Slider custom element.
  • smart.button.js — this file contains the smart-repeat-button custom element. The spin buttons of Smart.Slider are instances of smart-repeat-button.
  • smart.numeric.js — this file contains functions used for the processing of numeric objects.
  • smart.math.js — this file contains many of the mathematical functions used by the Smart.Slider custom element.
  • smart.tickintervalhandler.js — this file contains functions used for calculating the tick interval of the Smart.Slider custom element.

Smart.Slider also requires the following style sheets in order to be displayed correctly.

  • smart.default.css — the base style sheet file.

Initialization

To initialize (instantiate) a Smart.Slider custom element, insert the following tag in an HTML page:

<smart-slider></smart-slider>

To set properties of the custom element initially, do so by setting the respective attributes of the tag, e.g.:

<smart-slider orientation="vertical" min="0" max="100" value="33" scale-position="near"></smart-slider>

Getting and setting properties dynamically

Before accessing the custom element’s API in JavaScript, the custom element’s instance has to be retrieved:

let customElement = document.querySelector('smart-slider');

Properties are represented as members of the custom element’s instance object and can be accessed as such.

Here is an example showing how to get a property dynamically:

let min = customElement.min;

Here is an example showing how to set a property dynamically:

customElement.min = 0;

Calling methods

Before accessing the custom element’s API in JavaScript, the custom element’s instance has to be retrieved:

let customElement = document.querySelector('smart-slider');

Methods are represented as members of the custom element’s instance object and can be accessed as such.

Here is an example showing how to call a method:

customElement.val(100);

Styling (CSS API)

Smart HTML Elements use a pair of css files – smart.default.css and smart.[theme name].css. The base stylesheet creates the styles related to the element’s layout like margin, padding, border-width, position. The second CSS file applies the HTML Element’s colors, fonts, borders and backgrounds. The smart.default.css should be included before the second CSS file.

CSS selectors

The following CSS selectors can be used to style Smart.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-repeat-button – a Smart.RepeatButton used to increment the value of the slider. Can be styled like a normal Smart.RepeatButton.
      • .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-repeat-button – a Smart.RepeatButton used to decrement the value of the slider. Can be styled like a normal Smart.RepeatButton.
      • .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.