.slider {
  width: 200px;
  margin: 100px auto;
}

input[type="range"] {
  -webkit-appearance: none;
  -webkit-tap-highlight-color: rgba(255, 255, 255, 0);
  width: 100%;
  height: 10px;
  margin: 0;
  border: #e91e63;
  padding: 1px 2px;
  border-radius: 5px;
  background: none;
  -webkit-box-shadow: inset 0px 0px 1px 1px #e91e63, inset 0px 0px 1px 1px #e91e63;
  outline: none; /* no focus outline */
  cursor:pointer;
}

input[type="range"]::-moz-range-track {
  border: #e91e63;
  border-color:#e91e63;
  background: transparent;
}

input[type="range"]::-ms-track {
  border: inherit #e91e63;
  border-color:#e91e63;
  color: transparent; /* don't draw vertical reference line */
  background: transparent;
}

input[type="range"]::-ms-fill-lower,
input[type="range"]::-ms-fill-upper {
  background: transparent;
}

input[type="range"]::-ms-tooltip {
  display: none;
}

/* thumb */

input[type="range"]::-webkit-slider-thumb {
	cursor:pointer;
  -webkit-appearance: none;
  width: 20px;
  height: 18px;
  border: none;
  border-radius: 5px;
  background-image: linear-gradient(to bottom, #e91e63 0, #e91e63 100%); /* W3C */
}
input[type="range"]::-moz-range-thumb {
	cursor:pointer;
  width: 20px;
  height: 18px;
  border: 1px #e91e63;
  border-radius: 5px;
  background-image: linear-gradient(to bottom, #e91e63 0, #e91e63 100%); /* W3C */
}

input[type="range"]::-ms-thumb {
	cursor:pointer;
  width: 20px;
  height: 18px;
  border-radius: 5px;
  border: 1px #e91e63;
  background-image: linear-gradient(to bottom, #e91e63 0, #e91e63 100%); /* W3C */
}

/* Axis slider */

.ticks {
  /*font: 10px sans-serif;*/
}

.track,
.track-inset,
.track-overlay {
	color: red;
  stroke-linecap: round;
  
}

.track {
  stroke: black;
  stroke-opacity: 0.3;
  stroke-width: 1px;
}

.track-inset {
  stroke: black;
  stroke-width: 1px;
}

.track-overlay {
  pointer-events: stroke;
  stroke-width: 18px;
  stroke: transparent;
  cursor: pointer;
  
}

.handle {
  fill: #fff;
  stroke: #000;
  stroke-opacity: 0.5;
  stroke-width: 1.25px;
}