body {
    display: flex;
}

input[type="range"] { 
    margin: auto;
    -webkit-appearance: none;
    position: relative;
    overflow: hidden;
    cursor: pointer;
    border-radius: 0; /* iOS */
}

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

/*
 * 1. Set to 0 width and remove border for a slider without a thumb
 * 2. Shadow is negative the full width of the input and has a spread 
 *    of the width of the input.
 */
::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 5px; /* 1 */
    height: 20px;
    border-radius: 25%;
    background: #92D050;
    box-shadow: -200px 0 0 200px #92D050; /* 2 */
    border: 5px solid #FFF; /* 1 */
}

::-moz-range-track {
    height: 20px;
    background: #999;
}

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

::-ms-fill-lower { 
    background: #999;
}

::-ms-thumb { 
    background: #fff;
    border: 2px solid #999;
    box-sizing: border-box;
}

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

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

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

::-ms-tooltip { 
    display: none;
}
/*
datalist {
  display: flex;
  position: relative;
  flex-direction: column;
  justify-content: space-between;
  writing-mode: vertical-lr;
}

option {
  padding: 0;
}
*/