This example shows a way of building a custom component in plain JavaScript with no dependencies and no Web Components and no Custom Elements. This type of custom component is plain HTML/JS and can thus be used in combination with any framework. It is never subject to framework or version churn. It never goes out of fashion. It needs no tools for building. This is not a library. It is just way of writing code.
Style and core property values are configured via CSS. The component itself is not an object. It is not using "new", "class", or "this". It introduces no prototype nor any other shared mutable state. It is just a function. The component maintains no state. It solely works on the arguments that have been passed to it. This approach needs no lifecycle functions. All interaction with the component is set up on the calling site. See the source code of this page as an example.
17.11.2018: added touch and mouse support to set the progress value directly on the control.
Source code, Tests, View, Do-what-you-want-but-leave-me-alone License.
Style:
Progress:
Threshold:
Size:
Show thumb: