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	⭕
	Chrome	⭕
	SFSafariViewController	⭕
	WKWebView	--
	UIWebView	--
Android 4.4+	Chrome	⭕
Android *	Stock Browsers	❌
Mac/PC	Safari 9+	⭕
	Chrome 38+	⭕
	Firefox 31+	⭕
Windows	IE 10	❌
	IE 11	⭕
	Edge 13+	⭕

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)

• node@6.10.0

• npm@3.10.10

• selenium-standalone@6.0.1

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 selenium-standalone@6.0.1

We confirmed that selenium-standalone@6.0.1 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.