Nocturnal Parakeet Monitor

    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.

    Install

    npm i custom-range-input

    DownloadsWeekly Downloads

    2

    Version

    0.2.3

    License

    BSD-3-Clause

    Last publish

    Collaborators

    • qpshinqp