JSFiddle - React, Tailwind, and code Playground

HTML

<input>
 <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']:focus {
	outline: 5px solid green;
    
}