.d3-slider {
  position: relative;
  font-family: Verdana, Arial, sans-serif;
  font-size: 1.1em;
  z-index: 2;
  border-radius: 20px;
  background: linear-gradient(to right, red, orange, yellow, green, yellow, orange, red);
}

.d3-slider-horizontal {
  height: .8em;
}

.d3-slider-range-vertical {
  background: #2980b9;
  left: 0px;
  right: 0px;
  position: absolute;
  top: 0;
}

.d3-slider-vertical {
  width: .8em;
  height: 100px;
}

.d3-slider-handle {
  position: absolute;
  width: 22px;
  height: 22px;
  box-shadow: 1px 0px 7px grey;
  border-radius: 30px;
  background-color: white;
  z-index: 3;
}

.d3-slider-handle:hover {
  border: 1px solid #999999;
}

.d3-slider-horizontal .d3-slider-handle {
  top: -.3em;
  margin-left: -.6em;
}

.d3-slider-axis {
  position: relative;
  z-index: 1;
}

.d3-slider-axis-bottom {
  top: .8em;
}

.d3-slider-axis-right {
  left: .8em;
}

.d3-slider-axis path {
  stroke-width: 0;
  fill: none;
}

.d3-slider-axis line {
  fill: none;
  stroke: #aaa;
  shape-rendering: crispEdges;
}

.d3-slider-axis text {
  font-size: 11px;
}

.d3-slider-vertical .d3-slider-handle {
  left: -.25em;
  margin-left: 0;
  margin-bottom: -.6em;
}

.d3-slider-2 {
  background: linear-gradient(to right, #3465ff, green, yellow, orange, red);
}

.d3-slider-3 {
  background: linear-gradient(to right, #C0C0C0, #CECECE, #D3D3D3, #DCDCDC, #EFEFEF, #F5F5F5, #FFFFFF);
}

.d3-slider-dce {
  background: -webkit-linear-gradient(left, #3465ff 0%, #3465ff 49.75%, red 50.25%, red 100%);
  background: -moz-linear-gradient(left, #3465ff 0%, #3465ff 49.75%, red 50.25%, red 100%);
  background: -o-linear-gradient(left, #3465ff 0%, #3465ff 49.75%, red 50.25%, red 100%);
  background: linear-gradient(to right, #3465ff 0%, #3465ff 49.75%, red 50.25%, red 100%); /* FF3.6-15 */
}