style.css

svg {
  position: relative;
  border: solid 1px black;
}

svg line#segment1 {
  stroke: skyblue;
  stroke-linecap: round;
  stroke-width: 5;
}

svg line#segment2 {
  stroke: mediumpurple;
  stroke-linecap: round;
  stroke-width: 5;
}

/* Gripper */
.draggable {
  cursor: move;
  stroke: #252525; /* background colour */
  stroke-width: 5px;
  fill: white;
}

/* Slider */
input[type=range]:focus {
  outline: none;
}
input[type=range] {
  cursor: pointer;
  height: 30px;
  margin: 0;
}
.row {
  height: 30px;
  margin-top: 5px;
}
.row span {
  display: inline-block;
  vertical-align: top;
  height: 30px;
  line-height: 30px;
  border-radius: 3px;
  padding: 0 5px;
  font-family: "OpenSansRegular", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-weight: bold;
  color: ghostwhite;
}
span#label1 {
  background-color: skyblue;
}
span#label2 {
  background-color: mediumpurple;
}