JSFiddle - React, Tailwind, and code Playground

by Alaksandar Jesus Gene

HTML

<form class="pure-form"><input type="range" min="0" max="100" step="5" class="input input--range"></form>

CSS

body {
  padding: 20px; }

.input {
  position: relative;
  -webkit-appearance: none;
  -webkit-tap-highlight-color: rgba(255, 255, 255, 0);
  background-color: #aaa;
  height: 2px;
  border: none;
  outline: none; }
  .input::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 18px;
    height: 18px;
    border: none;
    border-radius: 50%;
    background-color: #888fff; }
  .input::-moz-range-thumb {
    width: 18px;
    height: 18px;
    border: none;
    border-radius: 50%;
    background-color: #888fff; }
  .input::-ms-thumb {
    width: 18px;
    height: 18px;
    border: none;
    border-radius: 50%;
    background-color: #888fff; }

.input--range:before, .input--range:after {
  position: absolute;
  top: 0;
  width: 10px;
  height: 15px;
  text-align: center;
  content: '-'; }
.input--range:before {
  left: -15px;
  content: '-'; }
.input--range:after {
  right: -15px;
  content: '+'; }

/*# sourceMappingURL=range.css.map */