Skip to content

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+.

License

Notifications You must be signed in to change notification settings

erovas/input-range.js-ES5-custom-element-

Repository files navigation

input-range.js

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+.

Compatibility

  • Works with all modern browsers from IE11+ (require polyfills, see the source code of index.html).

Dependencies

How to use it?

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>

API

The same as the native input

Demo

https://erovas.github.io/input-range.js/

Authors

  • Emanuel Rojas Vásquez - Initial work - erovas

License

This project is licensed under the BSD 3-Clause License - see the LICENSE file for details.

About

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+.

Topics

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published