具有多个 DIV 作为值的 JQuery UISlider

Question

我一直在寻找可以更改多个 DIV 值的 UI 滑块，但找不到一个与我想要的更接近的滑块。我没有从头开始的技术能力。有人可以帮忙吗？

这张图片描述了我正在寻找的东西。当用户滑动时，多个 DIV 会发生变化。

Answer 1

您可以通过 jQuery 的滑块通过编写自己的滑块函数来完成此操作。在本例中，文本在 50% 处发生变化。如果需要，您可以根据值调整定位。

$(function() {
    $(".sli3").slider({
        range: "min",
        value: 50,
        min: 0,
        max: 100,
        slide: function(event, ui) {
            if (ui.value<50) {
               $(".div-1").text("yay");
               $(".div-2").text("whoo");
            } else {
               $(".div-1").text("example text 1");
               $(".div-2").text("example text 2");
            }
            $(".div-1").css({top:ui.value + "%"})
        }
    });
});

.div-1 {
  position:fixed;
  top:50px;
  left:200px;
}

.div-2 {
  position:fixed;
  top:100px;
  left:40px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css"><script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<div class="sli3"></div>

<div class="div-1"></div>
<div class="div-2"></div>