Javascript jQuery中的可拖动滑块标尺

正在寻找一个可拖动（我所说的拖动是指双击时滚动）的标尺，如下面的链接所示

如果有人能帮助我使库实现相同的功能，我将不胜感激

---

考虑以下几点

$（函数（）{
函数getVal（）{
var p=$（“.ladder”）.position（）.top；
var r=1；
var h=$（“.step”）.height（）；
开关（真）{
病例（p>18和p<60）：
r=10；
打破
病例（p>22和p<17）：
r=9；
打破
案例（p>55和p<21）：
r=8；
打破
案例（p>92和p<54）：
r=7；
打破
案例（p>-130和p<-92）：
r=6；
打破
案例（p>-166和p<-130）：
r=5；
打破
案例（p>-200和p<-166）：
r=4；
打破
案例（p>-238和p<-200）：
r=3；
打破
案例（p>-272和p<-238）：
r=2；
打破
病例（p<-272）：
r=1；
打破
}
返回r；
}
$（“.ladder”）.draggable({
轴：“y”，
安全壳：[0，-30015060]，
拖动：函数（e、ui）{
$（“.value”）.val（getVal（））；
}
});
});
.ui梯形图{
宽度：150px；
高度：100px；
文本对齐：居中；
溢出：隐藏；
位置：相对位置；
}
.ui梯形图。步骤{
填充：0.5em0；
边框底部：1px实心#ccc；
}
.ui梯形图.标记{
边框顶部：2倍实心rgba（255,0,0,0.65）；
位置：绝对位置；
top:51px；
宽度：100%；
}
.ui梯形图.value{
位置：绝对位置；
top:41px；
左：118px；
宽度：1.5em；
左侧填充：5px；
}
.ui梯形图.箭头{
位置：绝对位置；
宽度：0；
身高：0；
边框顶部：10px实心透明；
边框底部：10px实心透明；
右边框：10px固体#ccc；
左边距：-10px；
顶部：42px；
左：118px；
}

10
9
8.
7.
6.
5.
4.
3.
2.
1.
谢谢，把内部台阶切成英寸怎么样。例如，在4到5之间，我们得到了11个步骤，基本上在整数之间还有11个步骤，所以我可以得到类似于4英尺和11inc的东西。Regards@KarueBensonKarue你没有说明你想要的是完全一样的东西。我提供了一个基本示例，您可以从中开始。请复习：我如何提出一个好问题？对不起，我知道了，我已经改进了，顺便问一下，你是如何获得标记的默认位置的。我的意思是可拖动的位置，你的位置是在标记读数为5的位置拖动的，我如何通过编程拖动它以适应另一个标记位置。@KarueBensonKarue如你所见，
标记
相对于父标记以绝对位置固定。由于用户仅在Y轴上拖动
梯形图
，因此我们查看
顶部
值。然后，
top
值与要表示的特定值相关。我使用了一个
开关（）
，但是你可以做很多事情，比如使用模数。哇！太好了，我刚刚意识到您通过此
设置默认位置的方式。我已调整顶部位置，以符合我自己的规格。谢谢，现在一切都很顺利