JSFiddle - React, Tailwind, and code Playground

HTML

scroll down...
<div style="height: 9999px;"></div>
<input placeholder="click here and press tab" />
    <span class="range-wrap"><input class="size" type="range" name="size" min="1" max="6" value="6" /></span>

CSS

.range-wrap {
    overflow: hidden;
    display: inline-block;
    vertical-align: middle;
}

input[type='range']::-moz-range-track {
    height: 4px;
    border: none;
    outline: none;
    background: #bebebe;
    border-radius: 2px;
    -moz-transform: translateY(3em)
    }

    input[type='range']::-moz-range-thumb {
    border: none;
    background: #000;
    width: 10px;
    height: 10px;
    border-radius: 13px;
    -moz-transform: translateY(3em);
    }

input[type='range']:focus::-moz-range-thumb{
    box-shadow: 0 0 5px #99F;
}

	input[type='range'], input[type='range']:focus, input[type='range']:active, input[type='range']::-moz-focus-inner, input[type='range']:-moz-focusring {
	border: 1px solid red;
	outline: none;
    position: relative;
    -moz-transform: translateY(-3em);
    }