JSFiddle - React, Tailwind, and code Playground

HTML

<input class="size" type="range" name="size" min="1" max="6" value="6"">

CSS

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

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

	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 white;
	outline: 2px solid white;
    outline-offset: -1px;
    }