JSFiddle - React, Tailwind, and code Playground

by Kyrylo Slatin

HTML

<input type="range" class="vVertical" />

CSS

@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {

    /* IE 10/11 specific style */
    input[type="range"]{
        -webkit-appearance: none !important;
        width:497px;
        height:22px;
        background-image:url('http://i.imgur.com/xR818lC.png');
        background-color:rgba(0,0,0,0);
    }
    .slider::-webkit-slider-thumb{
        -webkit-appearance: none !important;
        height:70px;
        width:70px;
        background-image:url('http://i.imgur.com/xR818lC.png');
    }
    input[type="range"]::-moz-range-track{
        -moz-appearance: none;
        width:497px;
        height:22px;
        background-image:url('http://i.imgur.com/xR818lC.png');
        background-color:rgba(0,0,0,0);
    }
    input[type="range"]::moz-range-thumb {
        -moz-appearance: none;
        height:70px;
        width:70px;
        background-image:none;
    }

    .slider
    {
    width: 226px;
    height: 70px;
    padding: 0px;
    overflow: visible;
    }
    .slider::-ms-thumb
    {
    width: 70px;
    height: 70px;
    padding: 0px;
    border: 0px;
    display:block;
    z-index: 99999;
    background-color: transparent;
    background-image: url('http://i.imgur.com/xR818lC.png');
    background-position: center;
    }
    .slider:active::-ms-thumb
    {
    background-image: url('http://i.imgur.com/xR818lC.png');
    }
    .slider::-ms-track
    {
    height: 70px;
    margin: 0px;
    border: 0px;
    padding: 0px;
    color: transparent;
    background-color: transparent;
    }
    .slider::-ms-fill-lower, .slider::-ms-fill-upper
    {
    height: 70px;
    margin: 0px;
    border: 0px;
    padding: 0px;
    background-color: transparent;
    background-repeat: no-repeat;
    }
    .slider::-ms-fill-lower
    {
    background-image: url('http://i.imgur.com/xR818lC.png');
    background-position: left top;
    }
    .slider::-ms-fill-upper
    {
    background-image: url('http://i.imgur.com/xR818lC.png');
   ...