Adding Time-bar

Time-bar adds a progressing bar to the slider which indicates the slideshow time. You need to enable slideshow option in the slider to see this UI control in action. Below you can find an example.

  var slider = new MasterSlider();

  // adds timebar control
  slider.control( 'timebar', {autohide: false} );

  slider.setup( 'headerSlider', {
    width: 900,
    height: 700,
    autoPlay: true,
    // other options ...
  });

Time bar options

The slider control method has two arguments. The first argument specifies the name of UI control and the second one is an object of control options. The list of supported options for timebar are listed below.

Option name	Default value	Description
thickness	4	Specifies the thickness of the time bar in pixels.
color	‘#3D3D3D’	Specifies the color of the time bar.
dir	“h”	Chooses the direction of timer. Possible values are `h` (horizontal) and `v` (vertical).
align	‘bottom’	Specifies how the control aligns within the slider.
autohide	false	Whether it hides the control upon mouse leaves the slider or not.
customClass	null	Adds a custom class name to the control element.
insertTo	null	The custom location in the DOM tree to add the control element. Possible value is any CSS selector string.
inset	true	Whether to insert the control inside view container or not.
margin	0	Specifies the space amount between the control and slider’s side.
hideOn	null	Hides the control on the specified breakpoint or makes the given window width amount smaller in pixels.Defining thumbnail