同一页面上的两个范围滑块 - rangeslider.js

Question

根本不知道 JavaScript，并且在尝试让两个范围滑块在同一页面上工作时遇到问题。有人吗？

我已将我的文件上传到此地址，因此您可以查看所有内容。 https://www.gpoint.co.uk/form.test/quotation.html

我正在使用以下 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>

范围 slider.js-2.3.0，我假设范围滑块脚本中有一些我遗漏或需要调整的东西。

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

Answer 1

问题是您的 css 选择器针对两个输入，将您的 functions.js 从

更改为

$('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);
    }
});

至

$('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);
    }
}));

应该解耦它们。

同一页面上的两个范围滑块 - rangeslider.js

Two Range Sliders on same page - rangeslider.js

javascript

jquery

html

rangeslider