Question

我有一个范围滑块，有一个渐变背景线可以滑动，我希望 滑块拇指具有与边框相同的渐变。

我通常理解这可以通过伪元素（之前/之后）实现，但鉴于我们已经使用了一个用于拇指，我不知道如何实现这一点。有人知道吗？

非常感谢提前！

.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>

如何使用渐变边框构建范围滑块？

1 个答案: