HTML5 带有 2 个滑块的滑块计算器

Question

我正在尝试创建一个 HTML5 滑块计算器。

我创建了两个具有不同范围、初始值和步长的滑块。这两个滑块被设置为在用户左右移动滑块时动态更新值。问题是我的第一个滑块更新了第二个滑块的值，但第一个滑块的值保持不变。

代码如下：

                                    echo 'Calculate Your Payments:';
                                echo '<div id="rate-block">';
                                echo '<label for="rate_slider">Rate</label>';
                                echo '<input type="range" min="0" max="12" value="5.9" id="rate_slider" step="0.1" oninput="outputUpdate(value)"/>';
                                echo ' <output for="rate_slider" id="rate">5.9</output> APR';
                                echo '<script>';
                                echo 'function outputUpdate(rateVal) {';
                                echo 'document.querySelector(\'#rate\').value = rateVal;';
                                echo '}';
                                echo '</script>';
                                echo '</div>';

                                echo '<div id="term-block">';
                                echo '<label for="term_slider">Term</label>';
                                echo '<input type="range" min="12" max="84" value="60" id="term_slider" step="12" oninput="outputUpdate(value)"/>';
                                echo ' <output for="term_slider" id="term">60</output> Months';
                                echo '<script>';
                                echo 'function outputUpdate(termVal) {';
                                echo 'document.querySelector(\'#term\').value = termVal;';
                                echo '}';
                                echo '</script>';
                                echo '</div>';

这是在 PHP。

页面的实时版本可见于：http://forestlakechev.staging.wpengine.com/inventory/2015/Chevrolet/Cruze/MN/Forest%20Lake/1G1PA5SH0F7130316/?

车辆图像旁边是一些选项卡式内容。单击财务选项卡，您将看到滑块。

感谢您的帮助！

贾里德

Answer 1

在JavaScript中，当多个函数同名时，只有最后一个被声明的是运行。请注意，代码中的两个 JS 函数共享相同的名称。您的第二个 outputUpdate() 函数覆盖了第一个函数，因此只有 #term 得到更新。确保函数具有不同的名称。

HTML5 带有 2 个滑块的滑块计算器

HTML5 Slider Calculator with 2 Sliders

html

php

jquery

input

slider