如何用梯度边框构建范围滑块

Question

i有一个范围滑块，该滑块具有梯度背景线需要滑动，我想要滑块拇指具有与边框相同的梯度。

我通常理解这可以通过一个伪元素(之前/之后(实现，但是鉴于我们已经为拇指使用了，因此我不确定如何实现这一目标。有人知道吗？

非常感谢！

jsfiddle

.gdas-range {
  -webkit-appearance: none;
  width: 100%;
  height: 2px;
  background-image: -webkit-linear-gradient(135deg, #7b63f0, #7b63f0, #3ad4c1, #36b7ee, #36b7ee) !important; /* For Chrome and Safari */
  background-image:    -moz-linear-gradient(135deg, #7b63f0, #7b63f0, #3ad4c1, #36b7ee, #36b7ee) !important; /* For old Fx (3.6 to 15) */
  background-image:     -ms-linear-gradient(135deg, #7b63f0, #7b63f0, #3ad4c1, #36b7ee, #36b7ee) !important; /* For pre-releases of IE 10*/
  background-image:      -o-linear-gradient(135deg, #7b63f0, #7b63f0, #3ad4c1, #36b7ee, #36b7ee) !important; /* For old Opera (11.1 to 12.0) */
  background-image:         linear-gradient(135deg, #7b63f0, #7b63f0, #3ad4c1, #36b7ee, #36b7ee) !important; /* Standard syntax; must be last */
  outline: none;
  -webkit-transition: .2s;
  transition: opacity .2s;
}
.gdas-range::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 20px;
    height: 20px;
    background: #ddd;
    border: 1px solid #757575;
    border-radius: 50%;
    cursor: pointer;
}
.gdas-range::-moz-range-thumb {
    width: 20px;
    height: 20px;
    background: #ddd;
    border: 1px solid #757575;
    border-radius: 50%;
    cursor: pointer;
}

	<span class="gdas-menu-left"><input type="range" name="gdas-range" class="gdas-range"></span>

Answer 1

您可以使用

来使拇指的背景图像共享滑块的空间参考

 background-image: linear-gradient(135deg, #7b63f0, #7b63f0, #3ad4c1, #36b7ee, #36b7ee);
 background-attachment: fixed;

是魔术的是bkg

.gdas-range {
  -webkit-appearance: none;
  width: 100%;
  height: 2px;
     background-image: linear-gradient(to right, red, green);
  outline: none;
  -webkit-transition: .2s;
  transition: opacity .2s;
}
.gdas-range::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 20px;
    height: 20px;
    background: #ddd;
    border: 3px solid transparent;
    border-radius: 50%;
    cursor: pointer;
     background-image: linear-gradient(white, white), linear-gradient(to right, red, green);
     background-attachment: fixed, fixed;
     background-clip: padding-box, border-box;
}
.gdas-range::-moz-range-thumb {
    width: 20px;
    height: 20px;
    background: #ddd;
    border: 3px solid transparent;
    border-radius: 50%;
    cursor: pointer;
     background-image: linear-gradient(white, white), linear-gradient(to right, red, green);
     background-attachment: fixed, fixed;
     background-clip: padding-box, border-box;
}

<span class="gdas-menu-left"><input type="range" name="gdas-range" class="gdas-range"></span>