Range sliders

Helper for noUIslider javascript library, an input type range UI

Installation

Range sliders requires the following dependencies:

    <div class="my-form u-mb-xl">
        <label for="range-slider">One handle</label>
        <div id="range-slider" class="my-range-slider"></div>
    </div>
    <div class="my-form">
        <label for="range-slider2">Two handles</label>
        <div id="range-slider2" class="my-range-slider" mod-options="{start:[30,50], connect:true, range:{min:0, max:100}, step:1, tooltips:true, pips:{mode:'range', density:10}}"></div>
    </div>
    <style>body{padding:20px;}</style>

Options

This component can use all options of noUiSlider. Default options are set as the following into the file my-range-sliders.js. Feel free to tweak it to your needs.

var options = {
    start: [100],
    connect: 'lower',
    range: {
        min: 0,
        max: 100
    },
    tooltips: false,
    pips: {
        mode: 'steps',
        stepped: true,
        density: 10
    }
};

Override noUiSlider default options passing your own options as a string into the custom attribute mod-options.

    <div class="my-form">
        <label for="range-slider">Most basic</label>
        <div id="range-slider" class="my-range-slider" mod-options="{start:[30], connect:'lower', range:{min:0, max:100}, step:10, tooltips:true, pips:{mode:'steps', stepped:true, density:10}}"></div>
    </div>
    <style>body{padding:20px;}</style>

Methods

Each range slider instance is stored as object into myRangeSliders.instances javascript object and named with their specified id. This allows to use noUiSlider methods and events.

    <div class="my-form u-mb-xl">
        <label for="rangeSlider1">Range slider 1</label>
        <div id="rangeSlider1" class="my-range-slider"></div>
    </div>
    <div class="my-form u-mb-xl">
        <label for="rangeSlider2">Range slider 2</label>
        <div id="rangeSlider2" class="my-range-slider"></div>
    </div>
    <button class="my-btn mod-xxs" onclick="myRangeSliders.instances.rangeSlider1.set(50)">Set range slider 1 to 50</button>
    <button class="my-btn mod-xxs mod-neutral" onclick="myRangeSliders.instances.rangeSlider1.reset()">reset 1</button>
    <button class="my-btn mod-xxs" onclick="myRangeSliders.instances.rangeSlider2.set(20)">Set range slider 2 to 20</button>
    <button class="my-btn mod-xxs mod-neutral" onclick="myRangeSliders.instances.rangeSlider2.reset()">reset 2</button>
    <style>body{padding:20px;}</style>

// Above example gives the following noUiSlider objects ready to use
myRangeSliders.instances.rangeSlider1
myRangeSliders.instances.rangeSlider2

// Read range slider1 value
myRangeSliders.instances.rangeSlider1.get();
// Returns Array [value1, ...] or single number

// Sets range slider1 value to 50
myRangeSliders.instances.rangeSlider1.set(50);

// Reset range slider 1
myRangeSliders.instances.rangeSlider1.reset();

// Reset range slider 2
myRangeSliders.instances.rangeSlider2.reset();

// Change options on the fly
var myNewOptions = {
    start: 30,
    range: {
        min: -20,
        max: 130
    }
}
myRangeSliders.instances.rangeSlider2.updateOptions(myNewOptions);

    <div class="my-form u-mb-xl">
        <label for="rangeSlider3">Range slider 3</label>
        <div id="rangeSlider3" class="my-range-slider" mod-options="{start:[20,80], step:5, connect:true, tooltips: true, range:{min:0, max:100}, pips:{mode:'steps', stepped:true, density:5}}"></div>
    </div>
    <button class="my-btn mod-xxs" onclick="alert('Array: '+myRangeSliders.instances.rangeSlider3.get())">Read</button>
    <button class="my-btn mod-xxs" onclick="myRangeSliders.instances.rangeSlider3.set([50,70])">Set 50 to 70</button>
    <button class="my-btn mod-xxs" onclick="myRangeSliders.instances.rangeSlider3.reset()">Reset</button>
    <button class="my-btn mod-xxs" onclick="myRangeSliders.instances.rangeSlider3.updateOptions({range:{min:0,max:100},tooltips:true})">Options 1</button>
    <button class="my-btn mod-xxs" onclick="myRangeSliders.instances.rangeSlider3.updateOptions({range:{min:-20,max:130},tooltips:false})">Options 2</button>
    <style>body{padding:20px;}</style>