CSS

Whilst any CSS attribute can be applied to any of the constituent elements, listed below are some of the more notable or mandatory ones.

stroke

This mandatory CSS/SVG attribute is used to set the colour of the dial ticks.

de-dial { stroke: #fff; }

stroke-width

This optional CSS/SVG attribute is used to set the width of the dial ticks. Since ticks are centered around the dial circumference, it's possible that very wide ticks will render outside the visible area. In these cases you can increase the view box area with the viewBox attribute.

de-dial { stroke-width: 10px; }

.dial

Apply CSS attributes to this class when you wish to target the dial only, rather than the dial and label.

de-dial .dial { ... }

.label

Apply CSS attributes to this class when you wish to target the label only, rather than the dial and label.

de-dial .label { ... }

Attributes

auto-start

Boolean attribute that indicates whether the dial should start counting as soon as it becomes visible. If not present, counting can only be started by calling the start() method.

<de-dial auto-start></de-dial>

auto-stop

Boolean attribute that indicates whether the dial should stop counting when it reaches its maximum or minimum value. If not present, counting will restart at 0 or the minimum value.

<de-dial auto-stop></de-dial>

count-reverse

Boolean attribute that indicates that the dial should count backwards (-1). If not present, the dial will count forwards (+1).

<de-dial count-reverse></de-dial>

gap-width

Integer attribute that indicates that the length of the gap between ticks.

<de-dial gap-width="1"></de-dial>

has-overflow

...

<de-dial has-overflow></de-dial>

label-postfix

...

<de-dial label-postfix="K+"></de-dial>

label-prefix

...

<de-dial label-prefix="Products"></de-dial>

max-value

Integer attribute that determines the total number of ticks on the dial.

<de-dial max-value="10"></de-dial>

show-label

Boolean attribute whose presence determines if the current value of the dial is displayed. By default, it is displayed in the center of the dial but this can be adjusted through CSS styling.

<de-dial show-label></de-dial>

show-shadow

Boolean attribute whose presence determines ...

<de-dial show-shadow></de-dial>

stop-href

String URL attribute that indicates, when the dial reaches its final value, it should load the specified URL into the current window.

<de-dial stop-href="https://google.com"></de-dial>

tick-width

Integer attribute that indicates the relative length of each tick. This length is relative to the gap width. For example, if both the gap width and the tick are set to 1, then the dial will be divided into gaps and ticks of equal length. If the tick width is 4 and the gap width is 1, then the dial will be divided into ticks that are 4 times longer than the gaps.

<de-dial tick-width="5"></de-dial>

value

Integer attribute that determines the number of ticks that should currently be displayed. Values greater than the maximum value (max-value) will revert to 0 whilst values less than 0 will revert to the maximum value (max-value).

<de-dial value="10"></de-dial>

viewbox-radius

Integer attribute that determines the size of the SVG rendering area. If large ticks render off the edges of the host element, this number can be increased to bring rendering back within the bounds of the host element.

<de-dial viewbox-radius="10"></de-dial>

wait-millis

Integer attribute that determines the amount of time, in milliseconds, that the dial should wait before incrementing to the next value. The default value is 1000 milliseconds which is equivalent to 1 second.

<de-dial wait-millis="10"></de-dial>

Properties

value

Integer read/write property that determines the number of ticks that should currently be displayed. Values greater than the maximum value (max-value) will revert to 0 whilst values less than 0 will revert to the maximum value (max-value).

dialElement.value = 10;

labelText

String read-only property that can be used to set the text that will be displayed in the dial label.

dialElement.labelText = "Happy Birthday!";

Methods

reset

Method to reset the value property to 0 or max-value depending on the existence of the count-reverse attribute.

dialElement.reset();

restart

Method to restart the dial counter from either 0 or max-value depending on the count-reverse attribute. This method, essentially, stops the counter, resets the counter value, and restarts the counter.

dialElement.restart();

start

Method to start the dial counter from the current value. If the count-reverse attribute is set, the counter will count backwards to 0.

dialElement.start();

stop

Method to stop the dial counter.

dialElement.stop();

toggle

Method to stop or start the dial counter.

dialElement.toggle();

Events

completed

Event that fires when the counter value reaches the maximum value (max-value) or 0 if the count-reverse attribute is set.

dialElement.addEventListener("completed", onCompleted);

function onCompleted()
{
dialElement.labelText = "Counter Finished!"
}


tick

Event that fires every time the counter value is incremented or decremented.

dialElement.addEventListener("tick", onTick);

function onTick()
{
console.log("The current value is " + dialElement.value);
}


CSS

Whilst any CSS attribute can be applied to any of the constituent elements, listed below are some of the more notable or mandatory ones.

stroke

This mandatory CSS/SVG attribute is used to set the colour of the dial ticks.

de-dial { stroke: #fff; }

stroke-width

This optional CSS/SVG attribute is used to set the width of the dial ticks. Since ticks are centered around the dial circumference, it's possible that very wide ticks will render outside the visible area. In these cases you can increase the view box area with the viewBox attribute.

de-dial { stroke-width: 10px; }

.dial

Apply CSS attributes to this class when you wish to target the dial only, rather than the dial and label.

de-dial .dial { ... }

.label

Apply CSS attributes to this class when you wish to target the label only, rather than the dial and label.

de-dial .label { ... }

Attributes

auto-start

Boolean attribute that indicates whether the dial should start counting as soon as it becomes visible. If not present, counting can only be started by calling the start() method.

<de-dial auto-start></de-dial>

auto-stop

Boolean attribute that indicates whether the dial should stop counting when it reaches its maximum or minimum value. If not present, counting will restart at 0 or the minimum value.

<de-dial auto-stop></de-dial>

count-reverse

Boolean attribute that indicates that the dial should count backwards (-1). If not present, the dial will count forwards (+1).

<de-dial count-reverse></de-dial>

gap-width

Integer attribute that indicates that the length of the gap between ticks.

<de-dial gap-width="1"></de-dial>

has-overflow

...

<de-dial has-overflow></de-dial>

max-value

Integer attribute that determines the total number of ticks on the dial.

<de-dial max-value="10"></de-dial>

show-label

Boolean attribute whose presence determines if the current value of the dial is displayed. By default, it is displayed in the center of the dial but this can be adjusted through CSS styling.

<de-dial show-label></de-dial>

show-shadow

Boolean attribute whose presence determines ...

<de-dial show-shadow></de-dial>

stop-href

String URL attribute that indicates, when the dial reaches its final value, it should load the specified URL into the current window.

<de-dial stop-href="https://google.com"></de-dial>

tick-width

Integer attribute that indicates the relative length of each tick. This length is relative to the gap width. For example, if both the gap width and the tick are set to 1, then the dial will be divided into gaps and ticks of equal length. If the tick width is 4 and the gap width is 1, then the dial will be divided into ticks that are 4 times longer than the gaps.

<de-dial tick-width="5"></de-dial>

value

Integer attribute that determines the number of ticks that should currently be displayed. Values greater than the maximum value (max-value) will revert to 0 whilst values less than 0 will revert to the maximum value (max-value).

<de-dial value="10"></de-dial>

viewbox-radius

Integer attribute that determines the size of the SVG rendering area. If large ticks render off the edges of the host element, this number can be increased to bring rendering back within the bounds of the host element.

<de-dial viewbox-radius="10"></de-dial>

wait-millis

Integer attribute that determines the amount of time, in milliseconds, that the dial should wait before incrementing to the next value. The default value is 1000 milliseconds which is equivalent to 1 second.

<de-dial wait-millis="10"></de-dial>

Properties

value

Integer read/write property that determines the number of ticks that should currently be displayed. Values greater than the maximum value (max-value) will revert to 0 whilst values less than 0 will revert to the maximum value (max-value).

dialElement.value = 10;

labelText

String read-only property that can be used to set the text that will be displayed in the dial label.

dialElement.labelText = "Happy Birthday!";

Methods

reset

Method to reset the value property to 0 or max-value depending on the existence of the count-reverse attribute.

dialElement.reset();

restart

Method to restart the dial counter from either 0 or max-value depending on the count-reverse attribute. This method, essentially, stops the counter, resets the counter value, and restarts the counter.

dialElement.restart();

start

Method to start the dial counter from the current value. If the count-reverse attribute is set, the counter will count backwards to 0.

dialElement.start();

stop

Method to stop the dial counter.

dialElement.stop();

toggle

Method to stop or start the dial counter.

dialElement.toggle();

Events

completed

Event that fires when the counter value reaches the maximum value (max-value) or 0 if the count-reverse attribute is set.

dialElement.addEventListener("completed", onCompleted);

function onCompleted()
{
dialElement.labelText = "Counter Finished!"
}


tick

Event that fires every time the counter value is incremented or decremented.

dialElement.addEventListener("tick", onTick);

function onTick()
{
console.log("The current value is " + dialElement.value);
}