Javascript 如何创建具有两个控制柄的滑块以防止重叠？

我想要一个滑块，它可以在拖动输入框时更改输入框的值，但是当手动将值输入到输入框中时，滑块也会反映这一点

<form>
    <div>
        <input type="text" class="sliderValue" data-index="0" value="10" />
        <input type="text" class="sliderValue" data-index="1" value="90" />
    </div>
    <br />
    <div id="slider"></div>
</form>

$(document).ready(function() {
    $("#slider").slider({
        min: 0,
        max: 100,
        step: 1,
        values: [10, 90],
        slide: function(event, ui) {
            for (var i = 0; i < ui.values.length; ++i) {
                $("input.sliderValue[data-index=" + i + "]").val(ui.values[i]);
            }
        }
    });

    $("input.sliderValue").change(function() {
        var $this = $(this);
        $("#slider").slider("values", $this.data("index"), $this.val());
    });
});

$（文档）.ready（函数（）{
$（“#滑块”）.滑块({
分:0,，
最高：100，
步骤：1，
值：[10,90]，
幻灯片：功能（事件、用户界面）{
对于（变量i=0；i

像这样：

但我需要滑块的操纵器在相互拖动时相互反弹。换句话说，右侧处理程序不应该能够转到处理程序的左侧

链接：

$（文档）.ready（函数（）{
$（“#滑块”）.滑块({
分:0,，
最高：100，
步骤：1，
值：[10,90]，
幻灯片：功能（事件、用户界面）{
如果（ui.values[0]>=ui.values[1]）{
返回false；
}否则{
对于（变量i=0；i

链接：

$（文档）.ready（函数（）{
$（“#滑块”）.滑块({
分:0,，
最高：100，
步骤：1，
值：[10,90]，
幻灯片：功能（事件、用户界面）{
如果（ui.values[0]>=ui.values[1]）{
返回false；
}否则{
对于（变量i=0；i

如果第二小提琴手做了你想做的事，你的问题是什么？第二小提琴手几乎缺少第一小提琴手所拥有的所有能力。具体来说，你指的是什么能力？第二小提琴手的链接被删除，因为它可能会引起混淆，但这里是第二小提琴手的链接，当你在输入框中手动输入数字时，如果第二把小提琴做了你想做的，你的问题是什么？第二把小提琴几乎缺少第一把小提琴拥有的所有能力。具体来说，你指的是什么能力？第二把小提琴的链接被删除，因为它可能会引起混乱，但这里是它的链接第二把当你在输入框中手动输入数字时，它不会在滑块上改变这是一个相对较好的修复方法，但我考虑的更多的是让处理程序相互推动。像这样，这是一个相对较好的修复方法，但我更多地考虑让处理程序相互推动。这样地

$(document).ready(function() {
    $("#slider").slider({
        min: 0,
        max: 100,
        step: 1,
        values: [10, 90],
        slide: function(event, ui) {
            if ( ui.values[0] >= ui.values[1] ) {
                return false;
            } else {
                for (var i = 0; i < ui.values.length; ++i) {
                    $("input.sliderValue[data-index=" + i + "]").val(ui.values[i]);
                }
            }
        }
    });

    $("input.sliderValue").change(function() {
        var $this = $(this);
        $("#slider").slider("values", $this.data("index"), $this.val());
    });
});