Nocturnal Parakeet Monitor


    0.2.3 • Public • Published


    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


    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+ ⭕️


    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.


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


    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">

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


    See file


    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.


    npm i custom-range-input

    DownloadsWeekly Downloads






    Last publish


    • qpshinqp