小编Vep*_*pth的帖子

我有一个已解决的问题Animating range ticks when move range thumb。从那个问题，我有一个input type="range"自定义外观 - 拇指被做成弧形（半圆），span它采用范围的值，并被设计为一个带圆圈的拇指div，mask它的作用类似于刻度 - 步骤。

从这个预期结果

我试图用曲线将该弧连接到滑块。我尝试使用伪元素，但渐变与滑块上的渐变不同步，我无法制作如图所示的曲线。我还尝试使用JS 画布绘制该曲线并将其放置在所需的位置，但渐变再次不同步 - 变为固定颜色。

我想使用CSS 蒙版，但我不确定是否可以用它来制作想要的曲线。

这些是我的主要研究点：

• CSS 技巧 - 样式化跨浏览器兼容的范围输入
• 沿画布中的曲线渐变描边- 试图用画布制作类似的曲线（连接点）

这是我的CodePen和代码

// Position of span that shows range value and tick curve position
const tickContainer = document.getElementById('tickContainer');

const range = document.getElementById('range');
const rangeV = document.getElementById('rangeValue');
const setValue = () => {
  // Span …