input-range.js is a ES5 custom element, a highly stylizable component with the same functionality as the original input range (mimic iOS and PC behaviour), compatible with all modern browsers from IE11+.
- Works with all modern browsers from IE11+ (require polyfills, see the source code of index.html).
- Require ES5customElements.js
Import first ES5customElements.js and then input-range.js JavaScript library wherever you want into the document before using it.
<head>
<script src="ES5customElements.js"></script>
<script src="input-range.js"></script>
<link href="input-range.css" rel="stylesheet">
<!-- OR -->
<script src="input-range.bundle.js"></script>
</head>
<body>
<input-range min="-10" step="2" max="200" value="7"></input-range>
</body>or
<head>
</head>
<body>
<input-range min="-10" step="2" max="200" value="7"></input-range>
<script src="ES5customElements.js"></script>
<script src="input-range.js"></script>
<link href="input-range.css" rel="stylesheet">
<!-- OR -->
<script src="input-range.bundle.js"></script>
</body>or
<head>
<script src="ES5customElements.js"></script>
<script type="module" src="input-range.js"></script>
<link href="input-range.css" rel="stylesheet">
<!-- OR -->
<script type="module" src="input-range.bundle.js"></script>
</head>
<body>
<input-range min="-10" step="2" max="200" value="7"></input-range>
</body>or
<head>
<script src="ES5customElements.js"></script>
<script defer src="input-range.js"></script>
<link href="input-range.css" rel="stylesheet">
<!-- OR -->
<script defer src="input-range.bundle.js"></script>
</head>
<body>
<input-range min="-10" step="2" max="200" value="7"></input-range>
</body>The same as the native input
https://erovas.github.io/input-range.js/
- Emanuel Rojas Vásquez - Initial work - erovas
This project is licensed under the BSD 3-Clause License - see the LICENSE file for details.