#### noUI Slider

#### Using HTML5 input elements

    =============
        HTML
    =============

    <div class="container">
        <div id="html5"></div>
        <br/>
        <div class="row mt-4 mb-4">
            <div class="col-lg-6 mb-3">
                <select id="input-select" class="form-control"></select>
            </div>
            <div class="col-lg-6">
                <input type="number" class="form-control" min="-20" max="40" step="1" id="input-number">
            </div>
        </div>
    </div>

    =============
       Javascript
    =============

    var html5Slider = document.getElementById('html5');

    noUiSlider.create(html5Slider, {
        start: [ 10, 30 ],
        connect: true,
        tooltips: true,
        range: {
            'min': -20,
            'max': 40
        }
    });

#### Non linear slider

    =============
        HTML
    =============

    <div class="container">
        <div id="nonlinear"></div>
        <br/>
        <div class="row mt-4 mb-4">
             <div class="col-lg-6">
                 <span class="example-val" id="lower-value"></span>
             </div>
             <div class="col-lg-6 text-right">
                 <span class="example-val" id="upper-value"></span>
             </div>
        </div>
    </div>

    =============
       Javascript
    =============

    /*--------Non linear slider----------*/

    var nonLinearSlider = document.getElementById('nonlinear');

    noUiSlider.create(nonLinearSlider, {
        connect: true,
        behaviour: 'tap',
        tooltips: true,
        start: [ 500, 4000 ],
        range: {
            // Starting at 500, step the value by 500,
            // until 4000 is reached. From there, step by 1000.
            'min': [ 0 ],
            '10%': [ 500, 500 ],
            '50%': [ 4000, 1000 ],
            'max': [ 10000 ]
        }
    });

    var nodes = [
        document.getElementById('lower-value'), // 0
        document.getElementById('upper-value')  // 1
    ];

    // Display the slider value and how far the handle moved
    // from the left edge of the slider.
    nonLinearSlider.noUiSlider.on('update', function ( values, handle, unencoded, isTap, positions ) {
        nodes[handle].innerHTML = values[handle] + ' <span class="precentage-val">' + positions[handle].toFixed(2) + '% </span>';
    });

#### Locking sliders together

    =============
        HTML
    =============

    <div class="container">
        <div class="row mb-4">
            <div class="col-lg-12 mb-5">
                <div id="slider1"></div>
                <span class="example-val mt-4 d-inline-block" id="slider1-span"></span>
            </div>
        </div>
        <br/>
        <div class="row mb-0">
            <div class="col-lg-12 mb-5">
                <div id="slider2"></div>
                <span class="example-val mt-4 d-inline-block" id="slider2-span"></span>
            </div>
        </div>
        <div class="row">
            <div class="col-lg-12">
                <button id="lockbutton" class="btn btn-primary mb-4" style="float: right; margin: 20px 0 0;">lock</button>
            </div>
        </div>
    </div>

    =============
       Javascript
    =============

    /*-----Locking sliders together-----*/

    // setting up button clicks

    // Store the locked state and slider values.

    var lockedState = false,
        lockedSlider = false,
        lockedValues = [60, 80],
        slider1 = document.getElementById('slider1'),
        slider2 = document.getElementById('slider2'),
        lockButton = document.getElementById('lockbutton'),
        slider1Value = document.getElementById('slider1-span'),
        slider2Value = document.getElementById('slider2-span');

    // When the button is clicked, the locked
    // state is inverted.

    lockButton.addEventListener('click', function(){
        lockedState = !lockedState;
        this.textContent = lockedState ? 'unlock' : 'lock';
    });

    // cross updating

    function crossUpdate ( value, slider ) {

        // If the sliders aren't interlocked, don't
        // cross-update.
        if ( !lockedState ) return;

        // Select whether to increase or decrease
        // the other slider value.
        var a = slider1 === slider ? 0 : 1, b = a ? 0 : 1;

        // Offset the slider value.
        value -= lockedValues[b] - lockedValues[a];

        // Set the value
        slider.noUiSlider.set(value);
    }

    // initializing silders

    noUiSlider.create(slider1, {
        start: 60,
        // Disable animation on value-setting,
        // so the sliders respond immediately.
        animate: false,
        tooltips: true,
        range: {
            min: 50,
            max: 100
        }
    });

    noUiSlider.create(slider2, {
        start: 80,
        animate: false,
        tooltips: true,
        range: {
            min: 50,
            max: 100
        }
    });

    slider1.noUiSlider.on('update', function( values, handle ){
        slider1Value.innerHTML = values[handle];
    });

    slider2.noUiSlider.on('update', function( values, handle ){
        slider2Value.innerHTML = values[handle];
    });

    // linking sliders together

    function setLockedValues ( ) {
        lockedValues = [
            Number(slider1.noUiSlider.get()),
            Number(slider2.noUiSlider.get())
        ];
    }

    slider1.noUiSlider.on('change', setLockedValues);
    slider2.noUiSlider.on('change', setLockedValues);

    // The value will be send to the other slider,
    // using a custom function as the serialization
    // method. The function uses the global 'lockedState'
    // variable to decide whether the other slider is updated.

    slider1.noUiSlider.on('slide', function( values, handle ){
        crossUpdate(values[handle], slider2);
    });

#### Javascript Range Slider

#### Postion : Top-Left

0 %

    <div class="custom-progress progress-up" style="width: 100%">
        <div class="range-count"><span class="range-count-number" data-rangecountnumber="0">0</span> <span class="range-count-unit">%</span></div>
        <input type="range" class="form-range progress-range-counter" id="customRange1">
    </div>

#### Postion : Top-Right

0 %

    <div class="custom-progress top-right progress-up" style="width: 100%">
        <div class="range-count"><span class="range-count-number" data-rangecountnumber="0">0</span> <span class="range-count-unit">%</span></div>
        <input type="range" class="form-range progress-range-counter" id="customRange2">
    </div>

#### Postion : Bottom-Left

0 %

    <div class="custom-progress progress-down" style="width: 100%">
        <input type="range" class="form-range progress-range-counter" id="customRange3">
        <div class="range-count"><span class="range-count-number" data-rangecountnumber="0">0</span> <span class="range-count-unit">%</span></div>
    </div>

#### Postion : Bottom-Right

0 %

    <div class="custom-progress bottom-right progress-down" style="width: 100%">
        <input type="range" class="form-range progress-range-counter" id="customRange4">
        <div class="range-count"><span class="range-count-number" data-rangecountnumber="0">0</span> <span class="range-count-unit">%</span></div>
    </div>