Important: This documentation covers Yarn 1 (Classic).
For Yarn 2+ docs and migration guide, see yarnpkg.com.

Package detail

rangeable

Mobius13.1kMIT0.1.6

A dependency-free, responsive and touch-enabled javascript range slider written in vanilla javascript.

range, input, slider

readme

Rangeable

npm version license Average time to resolve an issue Percentage of issues still open

A dependency-free, responsive and touch-enabled vanilla javascript range slider to make <input type="range"> elements prettier and more configurable.

  • <input checked="" disabled="" type="checkbox"> No dependencies
  • <input checked="" disabled="" type="checkbox"> 3kb gzipped
  • <input checked="" disabled="" type="checkbox"> Touch enabled
  • <input checked="" disabled="" type="checkbox"> Responsive
  • <input checked="" disabled="" type="checkbox"> Single or double range layouts.
  • <input checked="" disabled="" type="checkbox"> Horizontal and vertical orientations.
  • <input checked="" disabled="" type="checkbox"> Fully stylable to fit your app.

Rangeable

** Rangeable is still in active development and therefore the API is in constant flux until v1.0.0. Check back regularly for any changes and make sure you have the latest version installed.**

Live Demos


Install

npm

npm install rangeable --save

Browser

Grab the files from one of the CDNs and include them in your page:

https://unpkg.com/rangeable@latest/dist/rangeable.min.css
https://unpkg.com/rangeable@latest/dist/rangeable.min.js

You can replace latest with the required release number if needed.


Default

Create a new instance:

const rangeable = new Rangeable(input, {
    type: "single",
    tooltips: "always",
    min: 0,
    max: 100,
    step: 1,
    value: 50,
    vertical: false,
    handle: undefined,
    handles: undefined,
    onInit: function() {
        // do something when the instance has loaded
    },
    onStart: function() {
        // do something on mousedown/touchstart
    },
    onChange: function() {
        // do something when the value changes
    },
    onEnd: function() {
        // do something on mouseup/touchend
    },
    classes: {
        input: "rangeable-input",
        container: "rangeable-container",
        vertical: "rangeable-vertical",
        progress: "rangeable-progress",
        handle: "rangeable-handle",
        tooltip: "rangeable-tooltip",
        track: "rangeable-track",
        multiple: "rangeable-multiple",
    }
});

You can pass either a reference to the input or a CSS3 selector string:

const myRangeInput = document.getElementById('myRangeInput');
const rangeable = new Rangeable(myRangeInput);

// or

const rangeable = new Rangeable('#myRangeInput');

Options

See Options


Public Methods

See Public Methods


Copyright © 2018 Karl Saunders | BSD & MIT license