Overview

A scroll bar is a numeric control used to select a numeric value from a range of values by moving a thumb along a track or by clicking on the track itself. 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 in the tank area if it is set as an input element.

Files

  • CSS files
    • smart.default.css - the CSS file containing the styles for the element.
  • Javascript module
    • smart.scrollbar.js - the JS module which is in the source/modules/ folder and loads all script dependencies.
  • Javascript files
    • smart.element.js - the base class.
    • smart.button.js - additional JS file containing the definition for the value control buttons.
    • smart.scrollbar.js - the JS file containing the definition for the element.

Usage

  • Import a module

    With this approach, we import a module and create the web component by using the Smart function. The #scrollbar is a smart-scroll-bar tag. 

    import {smartScrollBar} from "../../../source/modules/smart.scrollbar.js";

Smart('#scrollbar', class {
get properties() {
	return {
		orientation: 'horizontal'
	}
}
});

document.readyState === 'complete' ? init() : window.onload = init;

function init() { 

}
    Using the Smart function is optional. You can use const scrollbar = document.querySelector("#scrollbar"); and set the properties like that: 
    const scrollbar = document.querySelector("#scrollbar");

scrollbar.orientation = 'horizontal';

  • Import a module, Init on Demand

    The following imports the web component's module and creates it on demand, when the document is ready. The #scrollbar is a DIV tag.

    import {smartScrollBar} from "../../../source/modules/smart.scrollbar.js";

document.readyState === 'complete' ? init() : window.onload = init;

function init() { 
const slider = new smartScrollBar('#scrollbar', {
   	orientation: 'horizontal'
});
}
  • Load scripts

    The following code adds the custom element to the page.

    <!DOCTYPE html>
<html lang="en">
<head>
 <link rel="stylesheet" href="../../source/styles/smart.default.css" type="text/css" />
 <script type="text/javascript" src="../../source/smart.element.js"></script>
 <script type="text/javascript" src="../../source/smart.button.js"></script>
 <script type="text/javascript" src="../../source/smart.numeric.js"></script>
 <script type="text/javascript" src="../../source/smart.math.js"></script>
 <script type="text/javascript" src="../../source/smart.tickintervalhandler.js"></script>
 <script type="text/javascript" src="../../source/smart.tank.js"></script>
 <script type="text/javascript" src="../../source/smart.scrollbar.js"></script>
</head>
<body>
 <smart-scroll-bar></smart-scroll-bar>
</body>
</html>

    Note how smart.element.js is declared before everything else. This is mandatory for all custom elements.

    Demo

Create, Append, Remove, Get/Set Property, Invoke Method, Bind to Event


Create a new element:
const scrollbar = document.createElement('smart-scroll-bar');

Append it to the DOM: 
document.body.appendChild(scrollbar);

Remove it from the DOM: 
scrollbar.parentNode.removeChild(scrollbar);

Set a property: 
scrollbar.propertyName = propertyValue;

Get a property value: 
const propertyValue = scrollbar.propertyName;

Invoke a method: 
scrollbar.methodName(argument1, argument2);

Add Event Listener: 
const eventHandler = (event) => {
// your code here.
};

toast.addEventListener(eventName, eventHandler);

Remove Event Listener: 
toast.removeEventListener(eventName, eventHandler, true);

Appearance

The scroll bar can be horizontal or vertical. This could be set via orientation property.

 <smart-scroll-bar orientation="vertical"></smart-scroll-bar>

Demo

Behavior

Scrollbar's range is defined by min and max properties.

When scrollbar's button is pressed, the value is increased/decreased by value, defined in step property.

If the user press the left mouse button in the area between a scrollbar button and thumb the value is increased/decreased by the value of largeStep property.

 <smart-scroll-bar min="0" max="100" step="10" large-step="20"></smart-scroll-bar>

Demo

Styling

Smart.ScrollBar uses the following CSS variables for styling:

  • --smart-scroll-button-size: used to set the size of the scroll buttons. Default value is 16px.