body, html {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    touch-action: none;
}

/* https://brennaobrien.com/blog/2014/05/style-input-type-range-in-every-browser.html */

input[type=range] {
    -webkit-appearance: none;
}

    input[type=range]::-webkit-slider-runnable-track {
        height: 8px;
        background: #bbb;
        border: none;
        border-radius: 4px;
    }

    input[type=range]::-webkit-slider-thumb {
        -webkit-appearance: none;
        border: none;
        height: 32px;
        width: 32px;
        border-radius: 50%;
        background: white;
        margin-top: -12px;
    }

    input[type=range]:focus {
        outline: none;
    }

        input[type=range]:focus::-webkit-slider-runnable-track {
            background: #ccc;
        }

    /* firefox: */

    input[type=range]::-moz-range-track {
        height: 8px;
        background: #bbb;
        border: none;
        border-radius: 4px;
    }

    input[type=range]::-moz-range-thumb {
        border: none;
        height: 32px;
        width: 32px;
        border-radius: 50%;
        background: white;
    }

    /*hide the outline behind the border*/
    input[type=range]:-moz-focusring {
        outline: 1px solid white;
        outline-offset: -1px;
    }

    input[type=range]:focus::-moz-range-track {
        background: #ccc;
    }