当前位置：文江博客话题详情

链接多个 Jquery 滑块

发布于 2024-10-30 05:47:06 字数 119 浏览 3 评论 0原文

如何更改一个 Jquery 滑块的值以镜像另一个滑块的值。

IE。如果我有一个带有范围的滑块，我想获取最终值并将其用作另一个范围滑块的起始值。我还希望它们在变化时一起动画化，这样它们看起来就像是链接在一起的

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

聚集的泪 2024-11-06 05:47:06

如果您使用 jQuery UI 滑块，您可以通过依赖幻灯片让一个滑块镜像另一个滑块事件。

由于您在问题中提出了两个问题，因此让我们处理第一个问题（滑块相互镜像）。

首先，创建两个滑块，如下所示。

$("#slider1").slider({
    min: 0,
    max: 100,
    slide: function(event, ui) {
        // TODO - Respond to slide event.
    }
});

$("#slider2").slider({
    min: 0,
    max: 100,
    slide: function(event, ui) {
        // TODO - Respond to slide event.
    }
});

当然，还要添加适当的 HTML。

<div id="slider1" style="width:100px"></div>
<div id="slider2" style="width:100px"></div>

这将设置您的滑块。现在您必须实现幻灯片事件，以便在更新滑块时更新其他滑块。现在就开始做吧。

$("#slider1").slider({
    min: 0,
    max: 100,
    slide: function(event, ui) {
        $('#slider2').slider("option", "value", ui.value);
    }
});

$("#slider2").slider({
    min: 0,
    max: 100,
    slide: function(event, ui) {
        $('#slider1').slider("option", "value", ui.value);
    }
});

请注意幻灯片函数内部正在进行的工作。

至于问题的第二部分（获取最终值并将其用作另一个滑块的起始值），您需要在最小值和最大值中设置它（使第二个开始于第一个滑块的末尾）最大值）。然后，您必须进行的唯一其他更改是将值的差异添加到幻灯片函数中的 ui.value 中。以下是您需要的 JavaScript 示例。

var diff = 100;
$("#slider1").slider({
    min: diff - diff,
    max: diff,
    slide: function(event, ui) {
        $("#amount1").val(ui.value);
        $("#amount2").val(ui.value + diff);
        $('#slider2').slider("option", "value", ui.value + diff);
    }
});
$("#amount1").val($("#slider1").slider("value"));

$("#slider2").slider({
    min: diff,
    max: diff + diff,
    slide: function(event, ui) {
        $("#amount1").val(ui.value - diff);
        $("#amount2").val(ui.value);
        $('#slider1').slider("option", "value", ui.value - diff);
    }
});
$("#amount2").val($("#slider2").slider("value"));

您可以更改 diff 值来更改条形之间的差异。我还显示了当前值，以便您可以看到这确实有效。您可以在此 jsFiddle 示例处查看此示例。希望这对您有帮助。

If you are using the jQuery UI slider, you can have one slider mirror another slider by relying on the slide event.

Since you asked two questions in your question, let's handle the first (sliders mirroring each other).

First, create your two sliders, like this.

$("#slider1").slider({
    min: 0,
    max: 100,
    slide: function(event, ui) {
        // TODO - Respond to slide event.
    }
});

$("#slider2").slider({
    min: 0,
    max: 100,
    slide: function(event, ui) {
        // TODO - Respond to slide event.
    }
});

And, of course, add the appropriate HTML.

<div id="slider1" style="width:100px"></div>
<div id="slider2" style="width:100px"></div>

This will setup your sliders. Now you have to have to implement the slide event so that the OTHER slider is updated when the slider is updated. Here is now to do it.

$("#slider1").slider({
    min: 0,
    max: 100,
    slide: function(event, ui) {
        $('#slider2').slider("option", "value", ui.value);
    }
});

$("#slider2").slider({
    min: 0,
    max: 100,
    slide: function(event, ui) {
        $('#slider1').slider("option", "value", ui.value);
    }
});

Note the work going on inside the slide function.

As to the second part of your question (take the end value and use it as the start value of another slider), you'll want to set that in the min and max values (make the second start at the end of the first slider's max value). Then, the only other change you have to make is adding the difference in values to the ui.value in the slide function. Here is an example of the JavaScript that you'll need.

var diff = 100;
$("#slider1").slider({
    min: diff - diff,
    max: diff,
    slide: function(event, ui) {
        $("#amount1").val(ui.value);
        $("#amount2").val(ui.value + diff);
        $('#slider2').slider("option", "value", ui.value + diff);
    }
});
$("#amount1").val($("#slider1").slider("value"));

$("#slider2").slider({
    min: diff,
    max: diff + diff,
    slide: function(event, ui) {
        $("#amount1").val(ui.value - diff);
        $("#amount2").val(ui.value);
        $('#slider1').slider("option", "value", ui.value - diff);
    }
});
$("#amount2").val($("#slider2").slider("value"));

You can change the diff value to change the differences between the bars. I also included a display of the current value so you can see that this is indeed working. You can see this example at this jsFiddle example. Hope this helps you out.

回复收藏 0 原文

~没有更多了~