https://github.com/nju33/rangebar

💊 Elements like input[type=range]
https://github.com/nju33/rangebar

form input library pure-javascript range

Last synced: 11 months ago
JSON representation

💊 Elements like input[type=range]

• Host: GitHub
• URL: https://github.com/nju33/rangebar
• Owner: nju33
• License: mit
• Created: 2017-03-19T17:13:28.000Z (almost 9 years ago)
• Default Branch: master
• Last Pushed: 2017-03-30T06:50:33.000Z (almost 9 years ago)
• Last Synced: 2024-10-29T22:25:44.665Z (about 1 year ago)
• Topics: form, input, library, pure-javascript, range
• Language: JavaScript
• Homepage: https://www.npmjs.com/package/rangebar
• Size: 1.1 MB
• Stars: 3
• Watchers: 2
• Forks: 0
• Open Issues: 2
• Metadata Files:
  • Readme: README.md
  • Changelog: CHANGELOG.md
  • License: LICENSE.md

Awesome Lists containing this project

README

          
# Rangebar

💊 Elements like input[type=range]

![screenshot](https://github.com/nju33/rangebar/raw/master/images/screenshot.gif?raw=true)

## Install or Download

```sh

yarn add rangebar

npm i -S rangebar

```

Or access to [releases page](https://github.com/nju33/rangebar/releases).

Then, download the latest version.

## Usage

First, if you read as a separate file

```html

```

```js

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