custom-range-input

0.2.3 • Public • Published

CustomRangeInput

npm version Build Status BSD 3-Clause License Code Climate

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


How it looks like

Demo

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

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

Package Sidebar

Install

npm i custom-range-input

Weekly Downloads

20

Version

0.2.3

License

BSD-3-Clause

Last publish

Collaborators

  • qpshinqp