https://github.com/stbaer/rangeslider-js

Lightweight rangeslider with touch support
https://github.com/stbaer/rangeslider-js

javascript nojquery range rangeslider-js slider

Last synced: about 2 months ago
JSON representation

Lightweight rangeslider with touch support

• Host: GitHub
• URL: https://github.com/stbaer/rangeslider-js
• Owner: stbaer
• License: mit
• Created: 2015-06-16T13:50:43.000Z (almost 10 years ago)
• Default Branch: master
• Last Pushed: 2020-05-01T09:53:53.000Z (about 5 years ago)
• Last Synced: 2024-10-05T17:18:15.904Z (8 months ago)
• Topics: javascript, nojquery, range, rangeslider-js, slider
• Language: JavaScript
• Homepage: http://stbaer.github.io/rangeslider-js/
• Size: 1.21 MB
• Stars: 45
• Watchers: 3
• Forks: 13
• Open Issues: 8
• Metadata Files:
  • Readme: README.md
  • Changelog: History.md
  • License: LICENSE.md

Awesome Lists containing this project

README

        
# rangeslider-js

[![Build Status](https://travis-ci.org/stbaer/rangeslider-js.svg?branch=master)](https://travis-ci.org/stbaer/rangeslider-js)

[![Inline docs](http://inch-ci.org/github/stbaer/rangeslider-js.svg?branch=master)](http://inch-ci.org/github/stbaer/rangeslider-js)

[![Dependency Status](https://david-dm.org/stbaer/rangeslider-js.svg)](https://david-dm.org/stbaer/rangeslider-js)

> Simple, fast and lightweight slider, touch friendly

[Docs and Examples](http://stbaer.github.io/rangeslider-js/)

- v1 was based on [rangeslider.js](https://github.com/andreruffert/rangeslider.js), main differences:

    - no jQuery

    - raf to throttle window resize, transform to set the handle position

    - fewer and only basic styles

    - no vertical mode

## Install

`npm i rangeslider-js --save`

## Usage

```html

```

```js

import rangesliderJs from 'rangeslider-js'

// single, options via js 

rangesliderJs.create(document.getElementById('slider1'), {min:0, max: 1, value: 0.5, step: 0.1})

// or single, options via html attributes 

rangesliderJs.create(document.getElementById('slider2'))

// or initialize multiple

rangesliderJs.create(document.querySelectorAll('input[type="range"]'))

```

### Options

```js

{

    min: 0,

    max: 100,

    value: 50,

    step: 1,

    // callbacks

    onInit: (value, percent, position) => {},

    onSlideStart: (value, percent, position) => {},

    onSlide: (value, percent, position) => {},

    onSlideEnd: (value, percent, position) => {}

}

```

### Events

## Contribute or Report Issue

Pull requests should target the **develop** branch.

For bugs and feature requests, [please create an issue][10].

[10]: https://github.com/stbaer/rangeslider-js/issues

## Licence

MIT, see [LICENSE.md](http://github.com/stbaer/rangeslider-js/blob/master/LICENSE.md) for details.