controls

Type: Object|Array

// single slider
controls: {
    min: Number,
    max: Number,
    locked: Boolean
}

// double slider
controls: [{
    min: Number,
    max: Number,
    locked: Boolean
}, {
    min: Number,
    max: Number,
    locked: Boolean
}]

Set a variety of options for the handle on sliders.

The min and min values can also be set dynamically with the setLimits() method.

min

Type: Number

Set the minimum value the handle can move to.

max

Type: Number

Set the maximum value the handle can move to.

locked

Type: Boolean

Set to true to lock the handle and prevent movement with mouse/touch controls.

Single Sliders

Create a slider with a range of 0 to 100, but limit the handle to 10 and 80:

const slider = new Rangeable(myInput, {
    min: 0,
    max: 100,
    handle: {
        min: 10
        max: 80,
    }
});

Live Demo

Double Sliders

Same setup as for single sliders, but instead of passing an object, you must pass an array of objects - one for each handle.

Create a double slider with a min of 0 and a max of 100, but limit the handles to 10 to 30 and 70 to 90 respectively:

const slider = new Rangeable(myInput, {
    min: 0,
    max: 100,
    handles: [{
        min: 10,
        max: 30,
    }, {
        min: 70
        max: 90,
    }]
});

Live Demo