CODEWITHSUNDEEP
javascripthtml
Brian
Brian

Reputation: 1989

Why can't I successfully increase an HTML range slider value with JavaScript, but I can successfully decrease it?

I am attempting to adjust an HTML range slider via JavaScript, but it is not working as intended.

I can successfully adjust it down, but up is not working as well, the same.

Here is the code in a JSFiddle

<!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"> &#x2012; </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(){
                VOLUME.value = (VOLUME.value + STEP_VALUE);
                OUTPUT.innerHTML = VOLUME.value;
            });

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

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

Upvotes: 2

Views: 49

Answers (1)

Alex
Alex

Reputation: 1072

The type of VOLUME.value in your up/down functions is a string not a number. Cast it to a number (e.g. change VOLUME.value = (VOLUME.value + STEP_VALUE); to VOLUME.value = (+VOLUME.value + STEP_VALUE);.

Upvotes: 1

Related Questions