Two Range Sliders on same page - rangeslider.js

Question

Don't know JavaScript at all, and having issues trying to get two range sliders to work on the same page. Anyone?

I have uploaded my files to this address so you are able to view everything. https://www.gpoint.co.uk/form.test/quotation.html

I am using the following HTML:

<div class="budget_slider">
<input type="range" name="budget" min="0" max="30000" step="100" value="0" data-orientation="horizontal" onchange="getVals(this, 'budget');">
<span>£</span>
</div>

And the range slider.js-2.3.0, I assume there is something in the range slider script that I am missing or rather needs to be tweaked.

https://jsfiddle.net/Gpoint/2krnopdz/

Answer 1

The issue is your css selectors are targeting both inputs, changing your functions.js from

$('input[type="range"]').rangeslider({
    polyfill: false,
    onInit: function () {
        this.output = $(".budget_slider span").html(this.$element.val());
    },
    onSlide: function (
        position, value) {
        this.output.html(value);
    }
});

to

$('input[type="range"]').each((i, x) => $(x).rangeslider({
    polyfill: false,
    onInit: function () {
        this.output = $($(".budget_slider span")[i]).html(this.$element.val());
    },
    onSlide: function (
        position, value) {
        this.output.html(value);
    }
}));

should decouple them.