Let's see the stacking and markup of the
As you can see, the
<input type="range"> has some essential attributes:
type, to define the type of the
min, to define the allowed minimum value.
max, to define the allowed maximum value.
step, to define the step-distance of each increment/decrement.
value, to define the initial value.
styleattribute is because somebody's being lazy... an inline styling (
disabledattribute is for disabling the element.
It is wrapped within a
paragraph tag, so it will have nice (default) empty vertical spaces and be displayed as a block element.
Let's then create the option for comparing the event listener methods:
The method of stacking the
option elements (plus the listener/controller) can be read on this other post.
We'll create the output elements.
The above example is an anonymous auto-invoked function.
SYNOPSIS about the main logic
- First, the
- After we choose either option, it will then be enabled.
- Then we can observe the different behavior of each event listener method by dragging or clicking the
There are comments on it so you can see the flow.
Feel free to comment below.
removeEventListener is useful so that we don't attach more than one different listeners to one element (for this particular example).
Anywho, even though there's no event listener attached to it, declaring the
removeEventListener to an element won't produce
removeEventListener works for registered
on listener attachment.
Choose the type of event capture
All demo codes combined:
input event is great for "real time" capture.
These element and event are
HTML5 features, so olden browsers don't support them.