基于SVG的带VueJS的滑块

我正在尝试用SVG实现一个范围滑块。我已经用标记构建了SVG格式。现在我正在尝试执行单击操作数。如果最终用户单击工具栏上的任何位置，则需要将工具栏移动到该位置

SVG格式：

<svg xmlns="http://www.w3.org/2000/svg" :viewBox="'0 0 '+side+' 15'" ref="_svg" @click="handleClick">
    <line x1="250" y1="7" x2="0" y2="7" stroke="#334860" stroke-width="3"></line>
    <path :d="'M 0 7 l '+position+' 0'" stroke="#00be7e" stroke-width="3" fill="none"></path>
    <text :x="(position)-1.5" y="3" font-size="3" style="fill:red;">99</text>
    <circle :cx="position" cy="7" r="1.5" stroke="#00be7e" stroke-width="3" fill="#00be7e"></circle>
</svg>

---

当用户单击工具栏上的某个位置时，将触发句柄单击功能。但是，问题是没有设置单击区域的正确位置。关于它的最佳实践是什么？

我想问题在于计算磨砂的X位置。 我以这种方式更改了代码，它似乎起到了作用：

this.position=e.clientX-this.$refs.\u svg.getBoundingClientRect（）.left

另外，为了不允许用户在条形图周围单击，可能在计算中添加最小/最大值可以通过以下方式进行改进：

var pos = e.clientX - this.$refs._svg.getBoundingClientRect().left;
var refined = Math.max(pos, 0);
    refined = Math.min(refined, this.side);

this.position = refined;

我还准备了一把小提琴，你可以测试一下：


希望能有帮助

var pos = e.clientX - this.$refs._svg.getBoundingClientRect().left;
var refined = Math.max(pos, 0);
    refined = Math.min(refined, this.side);

this.position = refined;