multirangeslider

multirangeslider is a slider for multiple ranges. Try to click on the bar above.

Slider has no dependencies and can be used as AMD module, CommonJS, or a standalone <script>.

Usage is simple as this:

var slider = new multirangeslider({
    min: 0,
    max: 100,
    minWidth: 14,
    step: 2
});
document.getElementById('el').appendChild(slider.el);

You can download slider via npm

npm install multirangeslider

Methods

.val()

slider.val(); // => [[40, 60], [80, 100]]

.rangeValue(rangeId)

returns a value of range specified by rangeId. If range doesn't exists returns false.

slider.rangeValue(1); // => [40, 60] 

.rangeValue(rangeId, value)

sets a value of range specified by rangeId. Returns true if range exists, otherwise false.

slider.rangeValue(1, [10, 20]);

.rangeData(rangeId, data)

Works like rangeValue, but data argument is an object which can contain these keys:

• val
• allowChange

slider.rangeData(1, {allowChange: false});

// =>
{
    id: 1
    allowChange: false
    val: [10, 20]
    el: dom_node
}

.add(value, options)

Adds a new range to the slider. If slider can't add the range, an error is thrown. options is optional and by the time respects only the id key.

slider.add([40, 50]);

.data()

returns list with data of all ranges.

[
    {
        id: 1
        allowChange: true
        val: [10, 20]
        el: dom_node
    },
    {
        id: 2
        allowChange: true
        val: [30, 50]
        el: dom_node
    }
]

.removeAll()

click to remove all ranges

.remove()

click to remove only first range

.render()

Renders (or rerenders) the slider. Usefull for your components/views that change sliders visibility or size.

Options

min, max, step

• All three options are mandatory.
• All should be integers.
• max > min.
• there should be an integer number of steps between max and min.

allowAdd

Default: true.

If set to false, ranges cannot be created (see example below).

allowRemove

Default: true.

If set to true, ranges can be removed with the UI. To remove a range, just decrease its width to zero by dragging the handlers.

If set to false, ranges cannot be removed with a UI (see example below).

allowChange

Default: true.

If false (see example below), ranges can't be changed with the UI, but can be changed with the api.

maxRanges

Sets maximum of ranges in the slider.

On the example below maxRanges equals 3.

rangeLabel

function that transforms range value to text written inside the label.

minWidth

Minimum width of range. By default equals options.step.

valueParse, valueFormat

In order to operate with a non-integer values, use valueParse and valueFormat functions.

var slider = new multirangeslider({
    min: 0,
    max: 24, //every option is written here in hours
    step: 0.5, // but slider stores minutes inside
    minWidth: 2,

    valueParse: function (value) {
      return parseInt(value * 60)
    },
    valueFormat: function (value) {
      return value / 60
    },
    label: function (value) {
      var minutes = value[1] - value[0];
      var hours = minutes / 60;
      if (hours == 1) {
        return 'one hour';
      }
      if (hours < 1) {
        return 'less than an hour';
      }
      if (hours > 1) {
        var result = parseInt(hours) + " hours";
        if ((hours % 1).toFixed(2) == "0.50") {
          result += " and a half";
        }
        return result;
      }
    }
});

slider.add([0, 7.5]);
slider.add([12.5, 23]);

Events

Any callback function can be subscripted with a .on method and can be unsubscripted with a .off method.

• remove emits when range is removed both by api and by ui.
• click emits when range is clicked.
• change emits when range was after range was changed.
• changing emits when range is changing.
• add emits when range is added.

Every event passes one argument in a callback function which is an object and looks like this

{
    data: [
        {
            id:1,
            val: [10, 20],
            el: dom_node
        },
        {
            id:2,
            val: [30, 40],
            el: dom_node
        },
        ...
    ]
    range: {
        {
            id:2,
            val: [30, 40],
            el: dom_node
        }
    }
}

The example above demonstrates changing and change event. Try change ranges length by dragging its edges and watch the numbers.

• Total length while changing: 40.
• Total length after change: 40.

function getTotalLength(data) {
  var result = 0;
  for (var i = 0; i < data.length; i++) {
    var range = data[i];
    result += (range.val[1] - range.val[0]);
  }
  return result;
}

var result1 = document.getElementById('result1');
var result2 = document.getElementById('result2');

slider.on('changing', function (event) {
    result1.innerHTML = getTotalLength(event.data).toString();
});
slider.on('change', function (data) {
    result2.innerHTML = getTotalLength(event.data).toString();
});