@import url("https://fonts.googleapis.com/css?family=Nunito:400,400i,700");
.wrap {
  width: 100vw;
  height: 100vh;
  background:  linear-gradient(to right top, #d7d7d7, #ccc4e1, #c5b0e9, #c39aed, #c481ed, #bf6fe5, #ba5bdc, #b545d2, #a437c1, #9429b1, #8419a1, #740291);
}

.center {
  width: 90%;
  height: .2rem;
  border-radius: 20px;
}

.center2 {
  width: 90%;
  height: .2rem;
  border-radius: 20px;
}
.center3 {
  width: 90%;
  height: .2rem;
  border-radius: 20px;
}

.range-index-wrap {
  color: rgba(0, 0, 0, 0.5);
  width: 100%;
  text-align: right;
  padding-top: 5px;
  font-size: 20px;
}

.range-index-wrap2 {
  color: rgba(0, 0, 0, 0.5);
  width: 100%;
  text-align: right;
  padding-top: 5px;
  font-size: 20px;
}
.range-index-wrap3 {
  color: rgba(0, 0, 0, 0.5);
  width: 100%;
  text-align: right;
  padding-top: 5px;
  font-size: 20px;
}

[type=range] {
  -webkit-appearance: none;
  width: 100%;
  height: 3px;
  top: 20%;
  background: linear-gradient(to right top, #c3a2d3, #c299d6, #c190d9, #c087dc, #be7ddf, #bd74e1, #bc6ae2, #bb60e3, #bb53e3, #ba45e3, #ba34e3, #ba19e2);
}

[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none;
}

[type=range]:focus {
  outline: none;
}

[type=range]::-ms-track {
  width: 100%;
  cursor: pointer;
  background: transparent;
  border-color: transparent;
  color: transparent;
}

[type=range]::-webkit-slider-thumb {
  box-shadow: 1px 2px 4px 0 rgba(0, 0, 0, 0.1);
  border: 2px solid linear-gradient(to right top, #c3a2d3, #c299d6, #c190d9, #c087dc, #be7ddf, #bd74e1, #bc6ae2, #bb60e3, #bb53e3, #ba45e3, #ba34e3, #ba19e2);
  height: 24px;
  width: 24px;
  border-radius: 50%;
  background: #fff;
  cursor: pointer;
  position: relative;
  top: -10px;
}

[type=range]::-moz-range-thumb {
  box-shadow: 1px 2px 4px 0 rgba(0, 0, 0, 0.1);
  border: 2px solid linear-gradient(to right top, #c3a2d3, #c299d6, #c190d9, #c087dc, #be7ddf, #bd74e1, #bc6ae2, #bb60e3, #bb53e3, #ba45e3, #ba34e3, #ba19e2);
  height: 24px;
  width: 24px;
  border-radius: 50%;
  background: #f3edf7;
  cursor: pointer;
  position: relative;
  top: -10px;
}

[type=range]::-ms-thumb {
  box-shadow: 0 0.1rem 0.5rem 0 rgba(0, 0, 0, 0.3);
  border: 4px solid  linear-gradient(to right top, #c3a2d3, #c299d6, #c190d9, #c087dc, #be7ddf, #bd74e1, #bc6ae2, #bb60e3, #bb53e3, #ba45e3, #ba34e3, #ba19e2);
  height: 24px;
  width: 24px;
  border-radius: 50%;
  background: #f3edf7;
  cursor: pointer;
  position: relative;
  top: -10px;
}

input[type=range]::-webkit-slider-runnable-track {
  width: 100%;
  height: 6px;
  cursor: pointer;
  box-shadow: 0 0.1rem 0.5rem 0 rgba(0, 0, 0, 0.3);
  background: linear-gradient(to right top, #c3a2d3, #c299d6, #c190d9, #c087dc, #be7ddf, #bd74e1, #bc6ae2, #bb60e3, #bb53e3, #ba45e3, #ba34e3, #ba19e2);
  border: none;
  border-radius: 5px;
}

[type=range]::-moz-range-track {
  width: 100%;
  height: 6px;
  cursor: pointer;
  box-shadow: 0 0.1rem 0.5rem 0 rgba(0, 0, 0, 0.3);
  background: linear-gradient(to right top, #c3a2d3, #c299d6, #c190d9, #c087dc, #be7ddf, #bd74e1, #bc6ae2, #bb60e3, #bb53e3, #ba45e3, #ba34e3, #ba19e2);
  border: none;
  border-radius: 5px;
}

[type=range]::-ms-track {
  width: 100%;
  height: 6px;
  cursor: pointer;
  box-shadow: inset 0 1px 1px 0 rgba(0, 0, 0, 0.2);
  background: linear-gradient(to right top, #c3a2d3, #c299d6, #c190d9, #c087dc, #be7ddf, #bd74e1, #bc6ae2, #bb60e3, #bb53e3, #ba45e3, #ba34e3, #ba19e2);
  border: none;
  border-radius: 2px;
}

[type=range]::-ms-fill-lower, [type=range]::-ms-fill-upper {
  background: linear-gradient(to right top, #c3a2d3, #c299d6, #c190d9, #c087dc, #be7ddf, #bd74e1, #bc6ae2, #bb60e3, #bb53e3, #ba45e3, #ba34e3, #ba19e2);
  border: none;
  border-radius: 2px;
  box-shadow: inset 0 1px 1px 0 rgba(0, 0, 0, 0.2);
}

[type=range]:focus::-ms-fill-lower {
  background:  linear-gradient(to right top, #c3a2d3, #c299d6, #c190d9, #c087dc, #be7ddf, #bd74e1, #bc6ae2, #bb60e3, #bb53e3, #ba45e3, #ba34e3, #ba19e2);
}

[type=range]:focus::-ms-fill-upper {
  background: linear-gradient(to right top, #c3a2d3, #c299d6, #c190d9, #c087dc, #be7ddf, #bd74e1, #bc6ae2, #bb60e3, #bb53e3, #ba45e3, #ba34e3, #ba19e2);
}

[type=range]:focus::-webkit-slider-runnable-track {
  background: linear-gradient(to right top, #c3a2d3, #c299d6, #c190d9, #c087dc, #be7ddf, #bd74e1, #bc6ae2, #bb60e3, #bb53e3, #ba45e3, #ba34e3, #ba19e2);
}