JSFiddle - React, Tailwind, and code Playground

HTML

<span class="range-wrap"><input class="size" type="range" name="size" min="1" max="6" value="6""></span>

CSS

.range-wrap {
    overflow: hidden;
}

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

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

	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(-10em);
    }