同一页面上的两个范围滑块-rangeslider.js [关闭]答案

【问题标题】：Two Range Sliders on same page - rangeslider.js [closed]同一页面上的两个范围滑块-rangeslider.js [关闭]
【发布时间】：2019-12-12 11:23:56
【问题描述】：

根本不懂 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>

还有范围滑块.js-2.3.0，我认为范围滑块脚本中有些东西我遗漏了或者需要调整。

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

【问题讨论】：

可以分享范围滑块的代码
这是我在Js中设置的代码-jsfiddle.net/Gpoint/2krnopdz
@GreenpointItSupport - 你的 jsfiddle 和你的网站不一样

标签： javascript jquery html rangeslider

【解决方案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);
    }
}));

应该将它们解耦。

【讨论】：

感谢 Ryan 成功了，我什至没有意识到 functions.js 页面是滑块的一部分。