ScrollBar CSS Styling

Smart.ScrollBar is a numeric control used to select a numeric value from a range of values by moving a thumb along a track, clicking on the track or clicking on the buttons located on both ends of the track. It is typically used in conjucntion with the listbox and dropdown elements to allow scrolling through the items. The user can change the value by clicking on the buttons of the scrollBar, clicking inside the track area or moving the thumb along the track. The scroll bar can be horizontal or vertical.

Required files

Smart.ScrollBar 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.scrollbar.js -- this file defines the functionality of the Smart.ScrollBar.
  • smart.button.js -- this file contains the smart-repeat-button custom element. The buttons of Smart.ScrollBar are instances of smart-repeat-button. Smart.ScrollBar also requires the following style sheets in order to be displayed correctly.
  • smart.base.css -- the base style sheet file.

Initialization

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

<smart-scroll-bar></smart-scroll-bar>

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

<smart-scroll-bar orientation="vertical" min="50" max="500" value="350"></smart-scroll-bar>

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-scroll-bar');

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;

Styling (CSS API)

Smart HTML Elements use a pair of css files - smart.base.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.base.css should be included before the second CSS file.

CSS selectors

The following CSS selectors can be used to style Smart.ScrollBar:

  • smart-scroll-bar - 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-repeat-button - a Smart.RepeatButton custom element used to increase scrolling. Can be styled like any other Smart.RepeatButton element.
      • .smart-arrow - a DIV element used for the arrow indicator inside the button.
      • .smart-track - a DIV element used for the scroll track.
      • .smart-thumb - a DIV element used for the thumb of the track.
      • smart-repeat-button - a Smart.RepeatButton custom element used to decrease scrolling. Can be styled like any other Smart.RepeatButton element.
      • .smart-arrow - a DIV element used for the arrow indicator inside the button.

CSS variables

Smart.ScrollBar uses the following CSS variables:

  • --smart-scroll-button-size - horizontal scroll bar buttons width / vertical scroll bar buttons height.