Javascript 如何在jquery ui范围滑块中移动两个旋钮

我正在尝试使用jQuery的UI滑块制作一个范围滑块，我想知道如何使两个旋钮一起移动。 例如，我的最小值为0，最大值为100。这两个旋钮的总值不得超过60，因此，如果第一个旋钮为10，则另一个旋钮可以一直到70。 不，这里的问题是，我们如何移动第二个旋钮，比如说移动到80，移动到20，所以通过拖动第二个旋钮，我会移动第一个旋钮，保持它们的距离

多谢各位

function generate_slider(video_duration) {
 start_duration = 0
 end_duration = 60

if(video_duration < 60){
    end_duration = video_duration;

}

$("#slider-range").slider({
    range: true,
    min: 0,
    max: video_duration,
    values: [start_duration, end_duration],
    slide: function (event, ui) {
    total_duration = (ui.values[1] - ui.values[0])

        if (total_duration > 60) {

            return false;

        } else {

            $("#amount").val("From: " + ui.values[0] + "sec" + " - To: " + ui.values[1] + "sec");
            $("#total_amount").val("Selected:" + total_duration + " out of " + video_duration + " Sec");
        }
        $("#" + prefix + "hdn_duration").val(video_duration);
        $("#" + prefix + "hdn_duration_total").val(total_duration);
        $("#" + prefix + "hdn_duration_from").val(ui.values[0]);
        $("#" + prefix + "hdn_duration_to").val(ui.values[1]);
    }
});
$("#amount").val("From: " + $("#slider-range").slider("values", 0) + "sec" + " - To: " + $("#slider-range").slider("values", 1) + "sec" );
$("#total_amount").val("Selected:" + ($("#slider-range").slider("values", 1) - $("#slider-range").slider("values", 0)) + " out of " + video_duration + " Sec");
$("#" + prefix + "hdn_duration").val(video_duration);
$("#" + prefix + "hdn_duration_total").val($("#slider-range").slider("values", 1) - $("#slider-range").slider("values", 0));
$("#" + prefix + "hdn_duration_from").val($("#slider-range").slider("values", 0));
$("#" + prefix + "hdn_duration_to").val($("#slider-range").slider("values", 1));

函数生成\u滑块（视频\u持续时间）{
开始时间=0
结束时长=60
如果（视频持续时间<60）{
结束持续时间=视频持续时间；
}
$（“#滑块范围”）。滑块({
范围：对，
分:0,，
最大：视频持续时间，
值：[开始持续时间，结束持续时间]，
幻灯片：功能（事件、用户界面）{
总持续时间=（ui.values[1]-ui.values[0]）
如果（总持续时间>60）{
返回false；
}否则{
$（“#金额”）.val（“从：”+ui.values[0]+“sec”+“-到：”+ui.values[1]+“sec”）；
$（“#总金额”）.val（“所选：“+total#u duration+”of“+video#u duration+”Sec”）；
}
$（“#”+前缀+“hdn_持续时间”）.val（视频#u持续时间）；
$（“#”+前缀+“hdn#U持续时间总计”）.val（总持续时间）；
$（“#”+前缀+“hdn_duration_from”）.val（ui.values[0]）；
$（“#”+前缀+“hdn_duration_to”）.val（ui.values[1]）；
}
});
$（“#金额”）.val（“从：”+$（“#滑块范围”）。滑块（“值”，0）+“秒”+“-到：”+$（“#滑块范围”）。滑块（“值”，1）+“秒”）；
$（“#总金额”）.val（“所选：”+（$（“#滑块范围”）。滑块（“值”，1）-$（“#滑块范围”）。滑块（“值”，0））+“超出”+视频持续时间+“秒”）；
$（“#”+前缀+“hdn_持续时间”）.val（视频#u持续时间）；
$（“#”+前缀+“hdn#U持续时间#U总计”）.val（$（“#滑块范围”）。滑块（“值”，1）-$（“#滑块范围”）。滑块（“值”，0）；
$（“#”+前缀+“hdn#u duration_from”）.val（$（“#滑块范围”）.slider（“值”，0））；
$（“#”+前缀+“hdn#u duration_to”）.val（$（“#滑块范围”）.slider（“值”，1））；

---

}

这个问题在这里提出已经很多年了，但我在尝试做一件非常类似的事情时遇到了这个问题。完成后，我想我应该调整一下当前问题的解决方案，然后发布它

您可以看到它在运行，但为了方便起见，我还添加了以下代码：

var myS=$（“#滑块”）；
var minIn=$（“#min”）；
var maxIn=$（“#max”）；
var-maxR=60；
var startMin=0；
var startMax=29；
最小值（startMin）；
最大值（startMax）；
迈斯滑块({
分:0,，
最高：100，
范围：对，
值：[startMin，startMax]，
幻灯片：功能（事件、用户界面）{
//在最大范围内，两个手柄应一起滑动
if（（myS.slider（“值”，1）-myS.slider（“值”，0））>=maxR）{
如果（ui.handleIndex==0）{
滑块（“values”，1，Math.min（ui.value+maxR，100））；
}否则{
滑块（“values”，0，Math.max（ui.value-maxR，0））；
}
}
更改输入（ui）；
}
});
功能更改输入（ui）{
//要获取当前句柄的准确值，请从ui获取它
如果（ui.handleIndex==0）{
minVal=ui.value；
maxVal=myS.slider（“值”，1）；
}否则{
minVal=myS.slider（“值”，0）；
maxVal=ui.value；
}
最小值（minVal）；
maxIn.val（maxVal）；
}

.container{
宽度：50%；
保证金：0自动；
}
#滑块{
利润率：15px；
}
输入{
文本对齐：居中；
}

到