noUISlider

Use the noUISlider library to create slideable input elements

Default

Use data-range-value-min to indicate the minimum value and data-range-value-max for the maximum value for the slider. data-range-value-low="200" can be used for the default value:

<div class="input-slider-container">
    <div id="input-slider-forms" class="input-slider" data-range-value-min="100" data-range-value-max="500"></div>
    <!-- Input slider values -->
    <div class="row mt-3 d-none">
        <div class="col-6">
            <span class="range-slider-value" data-range-value-low="200"></span>
        </div>
    </div>
</div>

Label

The following example will also showcase the value of the slider:

<div id="input-slider-range" data-range-value-min="100" data-range-value-max="500"></div>
<div class="row d-none">
    <div class="col-6">
        <span class="range-slider-value value-low" data-range-value-low="200" id="input-slider-range-value-low"></span>
    </div>
    <div class="col-6 text-right">
        <span class="range-slider-value value-high" data-range-value-high="400" id="input-slider-range-value-high"></span>
    </div>
</div>

Javascript

This is an example of usage for the example above in Javascript:

if ($("#input-slider-range")[0]) {
    var c = document.getElementById("input-slider-range"),
        d = document.getElementById("input-slider-range-value-low"),
        e = document.getElementById("input-slider-range-value-high"),
        f = [d, e];

    noUiSlider.create(c, {
        start: [parseInt(d.getAttribute('data-range-value-low')), parseInt(e.getAttribute('data-range-value-high'))],
        connect: !0,
        tooltips: true,
        range: {
            min: parseInt(c.getAttribute('data-range-value-min')),
            max: parseInt(c.getAttribute('data-range-value-max'))
        }
    }), c.noUiSlider.on("update", function (a, b) {
        f[b].textContent = a[b]
    })
}

Read more about noUISlider from the official plugin website.