CustomRangeInput

Defines custom-range-input element as a custom element using CustomElement API in WebComponents v1 and its polyfills.

How it looks like

Supported browsers

|Device/OS |Browser |Support| |------------|----------------------|-------| |iOS 9+ |Safari |:o: | | |Chrome |:o: | | |SFSafariViewController|:o: | | |WKWebView |-- | | |UIWebView |-- | |Android 4.4+|Chrome |:o: | |Android * |Stock Browsers |:x: | |Mac/PC |Safari 9+ |:o: | | |Chrome 38+ |:o: | | |Firefox 31+ |:o: | |Windows |IE 10 |:x: | | |IE 11 |:o: | | |Edge 13+ |:o: |

Architecture

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.

Polyfills

• webcomponents/webomponentsjs

Provides polyfills for WebComponents v1. webcomponents-loader.js is usefull because it automatically loads required polyfills. However, webcomponents-loader.js doesn't work on IE11, as the loader is written in ES2015-style, which is partially not supported by IE11. We customized webcomponents-loader.js to make it work on IE11 and pushed it to our forked repo. Consider using our customized one if needed.

• webcomponents/custom-elements

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.

Usage

Actual usage of this library looks like this below.

<!-- loading polyfills -->
<script src="./vendor/webcomponentsjs/webcomponents-loader.js"></script>
<script src="./vendor/custom-elements/src/native-shim.js"></script>

<!-- loading the library -->
<script src="./dist/customrangeinput.js"></script>

<!-- here is custom element tag!! -->
<custom-range-input type="range" is="custom-range-input"
                    min="-5" max="15" step="0.1"
                    value="0" subvalue="10">
</custom-range-input>

Development environment

For just a reference, this is our development environment

• (nvm - Node Version Manager)

• [email protected]

• [email protected]

• [email protected]

Customize and build

git clone https://github.com/misttechnologies/custom-range-input
npm 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,

npm test

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 [email protected]

We confirmed that [email protected] works with our project.

Contributing

See CONTRIBUTING.md file

Author

Shintaro Tanaka

Copyright and License

Copyright (c) 2017, Mist Technologies, Inc. All rights reserved. This software is released under the BSD 3-Clause License, see LICENSE file.