为何JavaScript能减小HTML range滑块值却无法增大？

问题根源：VOLUME.value返回的是字符串类型，直接与数字类型的STEP_VALUE相加时，会触发字符串拼接而非数值加法。例如初始值"2"加0.01会变成"20.01"，超出滑块max="4"的限制，导致滑块无响应；而减法操作会自动将字符串转为数字，因此减小功能正常。

修复方案：每次操作前将滑块值转为浮点数，再执行加减运算：

UP.addEventListener('click', function(){
    let currentValue = parseFloat(VOLUME.value);
    VOLUME.value = currentValue + STEP_VALUE;
    OUTPUT.innerHTML = VOLUME.value;
});

DOWN.addEventListener('click', function(){
    let currentValue = parseFloat(VOLUME.value);
    VOLUME.value = currentValue - STEP_VALUE;
    OUTPUT.innerHTML = VOLUME.value;
});

document.addEventListener('keydown', function(e){
    switch(e.key){
        case 'ArrowUp':
            let upValue = parseFloat(VOLUME.value);
            VOLUME.value = upValue + STEP_VALUE;
            OUTPUT.innerHTML = VOLUME.value;
            break;
        case 'ArrowDown':
            let downValue = parseFloat(VOLUME.value);
            VOLUME.value = downValue - STEP_VALUE;
            OUTPUT.innerHTML = VOLUME.value;
            break;
        case 'ArrowLeft':
            break;
        case 'ArrowRight':
            break;
    }
}, false);

完整修复后的代码：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="icon" href="" />
        <style type="text/css">
            * {
                margin: 0;
                padding: 0;
                color: #FFFFFF;
                background-color: #131313;
                font-family: sans-serif;
            }

            button {
                padding: 0.5em 1em;
            }

            #content {
                margin: 2em;

                display: flex;
                flex-direction: column;
            }

            #content > div {
                margin: 1em 0;
            }

            .output {
                width: 400px;
                padding: 1em;
                background-color: #C0C0C0;
                color: #000000;
                padding: 1em;
                font-family: monospace;
                font-size: 2em;
                border: dotted 2px #A9A9A9;
            }
        </style>
        <title></title>
    </head>
    <body>
        <div id="container">
            <div id="content">
                <div>
                    <input class="volume" type="range" min="0" max="4" value="2" step="0.01">
                </div>
                <div class="output"></div>
                <div>
                    <button id="down"> &ndash; </button>
                    <button id="up"> + </button>
                </div>
            </div> <!-- end content div -->
        </div> <!-- end container div -->
        <script type="text/javascript">
            const VOLUME = document.querySelector('.volume');
            const OUTPUT = document.querySelector('.output');
            const UP = document.querySelector('#up');
            const DOWN = document.querySelector('#down');

            const STEP_VALUE = parseFloat(VOLUME.step);

            OUTPUT.innerHTML = VOLUME.value;

            VOLUME.addEventListener('input', function(e){
                OUTPUT.innerHTML = VOLUME.value;
            });

            UP.addEventListener('click', function(){
                let currentValue = parseFloat(VOLUME.value);
                VOLUME.value = currentValue + STEP_VALUE;
                OUTPUT.innerHTML = VOLUME.value;
            });

            DOWN.addEventListener('click', function(){
                let currentValue = parseFloat(VOLUME.value);
                VOLUME.value = currentValue - STEP_VALUE;
                OUTPUT.innerHTML = VOLUME.value;
            });

            document.addEventListener('keydown', function(e){
                switch(e.key){
                    case 'ArrowUp':
                        let upValue = parseFloat(VOLUME.value);
                        VOLUME.value = upValue + STEP_VALUE;
                        OUTPUT.innerHTML = VOLUME.value;
                        break;
                    case 'ArrowDown':
                        let downValue = parseFloat(VOLUME.value);
                        VOLUME.value = downValue - STEP_VALUE;
                        OUTPUT.innerHTML = VOLUME.value;
                        break;
                    case 'ArrowLeft':
                        break;
                    case 'ArrowRight':
                        break;
                }
            }, false);
        </script>
    </body>
</html>

内容的提问来源于stack exchange，提问作者Brian