JSFiddle - React, Tailwind, and code Playground

by AlexLvovsky

HTML

<input type="range">

CSS

body {
  height: 100vh;
  margin: 0;
  display: flex;
}

input[type=range] {
  margin: auto;
  position: relative;
  /*removes default webkit styles*/
  -webkit-appearance: none;
  width: 300px;
  border-radius: 0;
  /* iOS */
   
  /*fix for FF unable to apply focus style bug */
  border: 1px solid white;
  /*required for proper track sizing in FF*/
  width: 300px;
  
  overflow: hidden; /*important*/
  /* height: 40px; */
}

::-webkit-slider-runnable-track {
  background: #ddd;
}

/*
 * 1. Set to 0 width and remove border for a slider without a thumb
 */

::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 20px;
  /* 1 */
  height: 40px;
  background: #fff;
  box-shadow: -100vw 0 0 100vw dodgerblue;
  border: 2px solid #999;
  /* 1 */
}

::-moz-range-track {
  height: 40px;
  background: #ddd;
}

::-moz-range-thumb {
  background: #fff;
  height: 40px;
  width: 20px;
  border: 3px solid #999;
  border-radius: 0 !important;
  box-shadow: -100vw 0 0 100vw dodgerblue;
  box-sizing: border-box;
}

::-ms-fill-lower {
  background: dodgerblue;
}

::-ms-thumb {
  /* background: #fff;
    border: 2px solid #999;
    height: 60px;
    width: 20px;
    box-sizing: border-box; */
  -webkit-appearance: none;
  border: none;
  height: 13px;
  width: 13px;
  border-radius: 50%;
  background: #ccc;
  cursor: pointer;
  margin-top: -4px;
}

::-ms-ticks-after {
  display: none;
}

::-ms-ticks-before {
  display: none;
}

::-ms-track {
  background: #ddd;
  color: transparent;
  height: 40px;
  border: none;
}

::-ms-tooltip {
  display: none;
}