Javascript 使用KonvaJs在画布中创建自定义输入范围

出于某些目的，我需要画布中的输入类型范围，我需要使用它来更改我的字体大小。我已经做了形状，也可以拖动，但圆控制器超出了线

只是预览一下垃圾箱，看看我的意思

我想把拖拽区域限制在直线上，就像输入范围一样

---

这是KonvaJs库的代码。

这正在工作，由拉夫顿编码

var-width=window.innerWidth；
var height=window.innerHeight；
var阶段=新Konva.阶段({
容器：'容器'，
宽度：宽度，
高度：高度
});
var layer=新Konva.layer（）；
var轨道=新Konva.线({
x:44，
y:55，
分数：[60,0,0,0,0,0,0,0,0,0]，
笔划：“#BDC3C7”，
冲程宽度：6，
可见：对，
名称：'轨道线'，
lineCap:“sqare”，
lineJoin:'sqare'
});
var TrackBall=新Konva.Circle({
x:44，
y:55，
笔划：'#D35400'，
填写：“#ddd”，
冲程宽度：2，
名称：“轨迹控制”，
半径：8，
真的，
龙顶：错，
可见：对，
dragBoundFunc:函数（位置）{
控制台日志（位置x，数学最小值（44，位置x））
返回{
x：数学最小值（104，数学最大值（44，位置x）），
y:this.getAbsolutePosition（）.y
};
}
});
图层。添加（轨迹）；
层。添加（轨迹球）；
阶段。添加（层）
使用放置在画布中的html输入范围元素和CSS，而不是重新发明轮子。但是，如果你必须“自己做”，你可以使用KonvaJS的工具限制拇指的“X”轴拖动