Number spinner web component with hh:mm:ss format with holdable button increment/decrement controls. You can also change the value using the mouse wheel.
Displays mm:ss when there are zero hours.
Value returns seconds (>=0).
<script src="ca_durationspin.js"></script>
<ca-duration-spin
max="3700"
value="3596"
step="1"
name="foo"
id="duration"
>
</ca-duration-spin>
<ca-duration-spin
min="0"
max="360"
value="5"
step="5"
minus="down"
plus="up"
>
</ca-duration-spin>
<ca-duration-spin></ca-duration-spin>
The name of input.
The smallest value that can be set (default: 0).
The largest value that can be set (default: 86400).
The initial value of the spinner, otherwise same as 'min'.
The rate of numerical change (default: 1).
The label for the minus button (default: -).
The label for the plus buton (default: +).
Set the 'value' attribute of the element to update its value from script.
// works
node.setAttribute("value",some_value);
// does not work
node.value = some_value
// all ways work
some_value = node.value;
some_value = node.getAttribute(value);
some_value = node.attributes.value;
Emits a Change event and sets the value property of the element.
duration = document.getElementById('duration');
duration.addEventListener('change', (e) => {
some_variable = e.target.value;
});