.custom-slider { touch-action: pan-y; } 

html { background: #eee; }

.custom-slider { position: relative; width: 100%; height: 7em; padding: 1em; box-sizing: border-box; }
.custom-slider-track { position: absolute; top: 0em; width: 100%; height: 100%; background: #2d89ef; box-sizing: border-box; position:relative; z-index: 1;}
.custom-slider-button { width: 5em; height: 5em; background: #2b5797; box-sizing: border-box; position:absolute; top:0; left:0; }
.custom-slider-button.active, .custom-slider-button:focus.active { background:  #ff0097; outline: solid 4px #000; }

.custom-slider-button {	user-select: none; -moz-user-select: none; -khtml-user-select: none; -webkit-user-select: none; }

.custom-slider-button.focus { background: #ff0097; outline: solid 4px #000;}

/* hide the real input type range behind the (higher z-indexed) track */
.custom-slider input[type="range"] { position: absolute; }

/* use adjacent sibling selector (so order in markup is important) to show focus on the "fake" slider button */
.custom-slider input[type="range"]:focus + .custom-slider-track .custom-slider-button { background:  #550097; }

/* buttons */

.custom-slider-decrement, .custom-slider-increment {
  font-size: 2em;
  font-weight: bold;
  background: #2b5797;
  color: #fff;
  border: none;
  padding: 0.5em;
  height: 2.5em;
  width: 2.5em;
}

.custom-slider-decrement:focus, .custom-slider-increment:focus {
  background: #ff0097; outline: solid 4px #000;
}
#sliderwrapper {
  display: flex;
  align-items: center;
}