HTML5滑块计算器与2滑块

我正在尝试创建一个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/?

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

谢谢你的帮助！

Jared