JSFiddle - React, Tailwind, and code Playground

HTML

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

CSS

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

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

	input[type='range'].custom, input[type='range'].custom:focus, input[type='range'].custom:active, input[type='range'].custom::-moz-focus-inner, input[type='range'].custom::-moz-focusring {
	border: 0;
	outline: none;
    }