input[type="range"] {
     -webkit-appearance: none;
     appearance: none;
     background: transparent;
     cursor: pointer;
     width: 100%;
     background: #ccc;
     height: 5px !important;
     padding-left: 0px !important;
     padding-right: 0px !important;
}

/***** Chrome, Safari, Opera, Edge Chromium *****/
input[type="range"]::-webkit-slider-runnable-track {
     height: 5px !important; /*Altura de la barra*/
     border-radius: 12px;
}


/******** Firefox ********/
input[type="range"]::-moz-range-track {
     height: 5px !important; /*Altura de la barra*/
     border-radius: 12px;
}

/******** Explorer ********/
input[type="range"]::-ms-track {
     height: 5px !important; /*Altura de la barra*/
     border-radius: 12px;
}

/***** Chrome, Safari, Opera, Edge Chromium *****/
input[type="range"]::-webkit-slider-thumb {
     -webkit-appearance: none; 
     appearance: none;
     margin-top: -8px; /* Centra el Thumb */
     background-color: #ffffff;
     border: 1px solid #b9b9b9;
     height: 1.2rem;
     width: 1.2rem;    
     border-radius: 50%;           
}

input[type="range"]::-moz-range-thumb {
     margin-top: -8px; /* Centra el Thumb */
     background-color: #ffffff;
     border: 1px solid #b9b9b9;
     height: 1.2rem;
     width: 1.2rem;    
     border-radius: 50%;
}

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


datalist > option:before {
   content: '';
   display: inline-block;
   position: relative;
   height: 0.6rem;
   width: 2px;
   background: #ccc;
   transform: translatey(-124%);
}