custom-range-input element as a custom element using
CustomElement API in WebComponents v1 and its polyfills.
How it looks like
|Android *||Stock Browsers||❌|
Implemented utilizing WebComponents v1 spec CustomElements. However, before distribution of library codes, the sources is designated to be converted from ES2015 to ES5 using webpack and babel, for browser-compatibility.
On one hand the built libraly is a ES5 style script, but on the other hand, ES5 style classes are not compatible with native (Chrome's) CustomElements v1 implementation, which requires ES2015-style classes. Thus native-shim.js should be loaded before loading custom-range-input main script. (See ES5 vs ES2015 for more details)
Also, most browsers currently provides only partial support for WebComponents v1. For those browsers, webcomponents/webcomponentsjs polyfills should be adopted.
Provides polyfills for WebComponents v1.
webcomponents-loader.js is usefull
because it automatically loads required polyfills.
webcomponents-loader.js doesn't work on IE11, as the loader is
written in ES2015-style, which is partially not supported by IE11.
webcomponents-loader.js to make it work on IE11 and pushed it to
our forked repo.
Consider using our customized one if needed.
Unfortunately our built libraly script in ES5 is not compatible with native CustomElement v1 implementation. To handle this (i.e. on Chrome), native-shim.js should be loaded before defining custom-range-input custom element. See ES5 vs ES2015 for more details.
Actual usage of this library looks like this below.
<!-- loading polyfills --><!-- loading the library --><!-- here is custom element tag!! -->
For just a reference, this is our development environment
(nvm - Node Version Manager)
Customize and build
git clone https://github.com/misttechnologies/custom-range-inputnpm install
npm postinstall script is defined to
npm run submodule && npm run build
automatically just after
npm install is done.
When you customize skins, edit:
src/css/style.scss and run
npm run build # Run build script
To run tests,
Make sure your node version is ^6.0.0 to run tests. Also selenium-standalone is required to be installed globally to run tests.
npm install -g firstname.lastname@example.org
We confirmed that email@example.com works with our project.
See CONTRIBUTING.md file