JSFiddle - React, Tailwind, and code Playground

by Ankhena

HTML

<input type="range" name="" id="">

CSS

html {
            box-sizing: border-box;
        }

        * {
            box-sizing: inherit;
        }

        input[type=range] {
            -webkit-appearance: none;
            margin: 10px 0;
            width: 100%;
        }

        input[type=range]:focus {
            outline: none;
        }

        input[type=range]::-webkit-slider-runnable-track {
            width: 100%;
            height: 10px;
            cursor: pointer;
            animate: 0.2s;
            box-shadow: 0 0 0 #000000, 0 0 0 #0d0d0d;
            background: #cdcdcd;
            border-radius: 6px;
            border: 0 solid #000101;
        }

        input[type=range]::-webkit-slider-thumb {
            height: 32px;
            width: 32px;
            border-radius: 50%;
            background: radial-gradient(circle, #68b738 4px, #fff 5px);
            border: 1px solid #cdcdcd;
            box-shadow: 0 2px 5px rgba(0, 0, 0, .15);
            cursor: pointer;
            -webkit-appearance: none;
            margin-top: -10px;
        }

        input[type=range]::-webkit-slider-thumb:hover {
            box-shadow: 0 3px 5px rgba(0, 0, 0, .25);
        }

        input[type=range]::-webkit-slider-thumb:active {
            border: 2px solid #68b738;
        }

        /*     input[type=range]:focus::-webkit-slider-runnable-track {
                 background: #9dcdba;
             }*/

        input[type=range]::-moz-range-track {
            width: 100%;
            height: 10px;
            cursor: pointer;
            animate: 0.2s;
            box-shadow: 0 0 0 #000000, 0 0 0 #0d0d0d;
            background: #cdcdcd;
            border-radius: 6px;
            border: 0 solid #000101;
        }

        input[type=range]::-moz-range-thumb {
            height: 32px;
            width: 32px;
            border-radius: 50%;
            background: radial-gradient(circle, #68b738 4px, #fff 5px);
            box-shadow: 0 2px 5px rgba(0, 0, 0, .15);
           ...