Javascript jQuery多处理范围滑块休耕到处理程序

我使用jquery滑块-1水平跟踪0-24小时的时间，1垂直调整LED值（稍后更多）。我想实现当我拖动水平滑块时，第一个处理程序垂直滑块是衰减的，但当拖动第二个或第三个处理程序时不是。现在我通过检查鼠标位置来实现它。在（“滑动”，函数（e，ui）。也许有可能跟随处理程序本身？现在所有处理程序的垂直滑块都在衰减，因为我不知道如何对处理程序进行排序。也许有人可以指导我正确的方向如何解决我的问题

这是我的密码。

$（“.vertical slider”）
.slider（{
分:0,，
最高：255，
方向：“垂直”
})         
.slider（“pips”{
步骤：“25”
});
$（“.slider”）.slider({
分:0,，
最高：24，
步骤：0.016666667，
数值：[10,13,20]
}).slider（“pips”{
其余：“标签”，
步骤：60
})
.on（“幻灯片”，功能（e、ui）{
var posX=e.clientX-20；
$（“.vertical slider”）.slider（）.css({
marginLeft:posX
})
})；

.slider.ui-slider{
边界半径：20px；
背景：#434d5a；
边界：无；
高度：10px；
边距：1em 4em 4em；}
.slider.ui滑块句柄{
边界半径：10px；
高度：10px；
宽度：10px；
顶部：-2px；
左边距：-11px；
边框：2px实心35; fffaf7；}
.slider.ui-slider-pip.ui-slider-pip-last.ui滑块标签，
.slider.ui slider pip.ui slider标签，
.slider.ui-slider-pip.ui-slider-pip-first.ui滑块标签{
颜色：蓝色；}
#垂直滑块{
高度：150像素；
左边距：300px；
}

jQueryUI示例页面

也许您不应该使用通配符选择器

$（“.vertical slider”）

，而应该使用与元素相关的内容，例如

$(el).closest(".vertical-slider")

---

很长一段时间了，但差不多都完成了。。。 如果有人对改进代码有任何建议，请添加注释

var c=parseInt（getComputedStyle（document.body）.fontSize）*4；
var atkape=parseInt（$（'.vertical slider'）.slider（）.css（“width”）*.5；
var val0；
var val1；
var val2；
var滑块IDTGH；
var-max；
$（“.slider”）.slider({
分:0,，
最高：24，
步骤：0.016666667，
值：[10,13,20,22]，
创建：功能（e、ui）{
sliderwidtgh=parseInt（$（'.slider'）.slider（）.css（“宽度”））；
val0=$（'.slider'）。slider（“值”）[0]；
val1=$（'.slider'）。slider（“值”）[1]；
val2=$（'.slider'）。slider（“值”）[2]；
val3=$（'.slider'）。slider（“值”）[3]；
最大值=$（“.slider”）.slider（“选项”、“最大值”）
$（“.vertical slider”）.slider（）.css({
边缘左侧：滑块宽度*值0/max+c+5
})
$（“.vertical-slider2”）.slider（）.css({
边缘左侧：（滑块宽度*值1/max）-（滑块宽度*值0/max+c-15）
})
$（“.vertical-slider3”）.slider（）.css({
边缘左侧：（滑块宽度*val2/max）-（滑块宽度*val1/max+c-15）
})
$（“.vertical-slider4”）.slider（）.css({
边缘左侧：（滑块宽度*val3/max）-（滑块宽度*val2/max+c-15）
})
}
}).slider（“pips”{
其余：“标签”，
步骤：60
})
.on（“幻灯片”，功能（e、ui）{
sliderwidtgh=parseInt（$（'.slider'）.slider（）.css（“宽度”））；
val0=$（'.slider'）。slider（“值”）[0]；
val1=$（'.slider'）。slider（“值”）[1]；
val2=$（'.slider'）。slider（“值”）[2]；
val3=$（'.slider'）。slider（“值”）[3]；
最大值=$（“.slider”）.slider（“选项”、“最大值”）
$（“.vertical slider”）.slider（）.css({
边缘左侧：滑块宽度*值0/max+c+5
})
$（“.vertical-slider2”）.slider（）.css({
边缘左侧：（滑块宽度*值1/max）-（滑块宽度*值0/max+c-15）
})
$（“.vertical-slider3”）.slider（）.css({
边缘左侧：（滑块宽度*val2/max）-（滑块宽度*val1/max+c-15）
})
$（“.vertical-slider4”）.slider（）.css({
边缘左侧：（滑块宽度*val3/max）-（滑块宽度*val2/max+c-15）
})
});
$（“.vertical slider”）
.slider（{
分:0,，
最高：255，
方向：“垂直”
})         
.slider（“pips”{
步骤：“25.5”
});
$（“.vertical-slider2”）
.slider（{
分:0,，
最高：255，
方向：“垂直”
})         
.slider（“pips”{
步骤：“25.5”
});
$（“.vertical-slider3”）
.slider（{
分:0,，
最高：255，
方向：“垂直”
})         
.slider（“pips”{
步骤：“25.5”
});
$（“.vertical-slider4”）
.slider（{
分:0,，
最高：255，
方向：“垂直”
})         
.slider（“pips”{
步骤：“25.5”
});
功能测试（）{
var val=$（'.slider'）.slider（“值”）[0]；
var val1=$（'.vertical slider'）。slider（“value”）；
$（“#labeloutput”）.text（“您选择了“+Math.floor（val）+”和“+Math.round（（val-Math.floor（val））/0.016667）+”和“+val1”）；
}

.slider.ui-slider{
边界半径：2px；
背景：#434d5a；
边界：无；
高度：10px；
边距：1em 4em 4em；}
.slider.ui滑块句柄{
边界半径：2px；
高度：12px；
宽度：4px；
顶部：-2px；
左边距：0px；}
.slider.ui-slider-pip.ui-slider-pip-last.ui滑块标签，
.slider.ui slider pip.ui slider标签，
.slider.ui-slider-pip.ui-slider-pip-first.ui滑块标签{
颜色：蓝色；}
.vertical-slider.ui-slider，
.垂直滑块2.ui滑块，
.垂直滑块3.ui滑块，
.垂直滑块4.ui滑块{
背景：#434d5a；
宽度：10px；
边界：无；
显示：内联块；
页边距底部：-15px；}
.垂直滑块.ui滑块手柄，
.垂直滑块2.用户界面滑块手柄，
.垂直滑块3.用户界面滑块手柄，
.垂直滑块4.用户界面滑块手柄{
边界半径：2px；
$(el).closest(".vertical-slider")