JavaScript HTML CSS
Switch branches/tags
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
dist
example/webpack
images
lib
src/styles
test
.babelrc
.gitignore
.npmignore
.travis.yml
CHANGELOG.md
LICENSE.md
README.md
bower.json
bs-config.js
build.js
dev-server.js
package.json
prod.js
rollup.config.js
screenshot.gif
yarn.lock

README.md

Rangebar

💊 Elements like input[type=range]

screenshot

Install or Download

yarn add rangebar
npm i -S rangebar

Or access to releases page. Then, download the latest version.

Usage

First, if you read as a separate file

<script src="/path/tp/rangebar.js"></script>
import Rangebar from 'rangebar';

new Rangebar({
  target: getElementById('target')
  data: {
    style: {
      // defualts
      len: '8em',
      width: '4px',
      barBackgroundColor: '#222',
      buttonBackgroundColor: '#cb1b45'
    },
    horizontal: true, // or false (vertical) (default: true)
    min: 0, // minimum value (defualt: 0)
    max: 100, // maximum value (default: 100)
    buttons: [
      // specify init position (required)
      10,
      20,
      30
    ],
    onChange(values) {
      console.log(values.length) // 3, This returns the new value of this.buttons
    }
  }
});

Example

  • test/fixtures/index.js
  • example/webpack/index.js

LICENSE

The MIT License (MIT)

Copyright (c) 2017 nju33 nju33.ki@gmail.com