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>

还有范围slide.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);
    }
}));

应该将它们解耦。

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

1 个答案: