jquery - jQuery 显示水平缩放多个标记

Question

我正在寻找 jQuery 解决方案来在水平刻度线上显示 4 个值。这些值是最小值、最大值、平均值和电流。它不是二维图。只是在一条水平线上的一个简单的 4 个点，标记指向这些点。

为了展示我想要实现的目标，这是一个草图

Answer 1

我首先想到的是jQuery UI 滑块。它支持多个句柄，如果仅用于显示目的，您可以将其禁用。

$(function() {
    $mySlider = $("#slider-range");
    $mySlider.slider({

      min: 0,
      max: 1000,
      values: [ 75, 125, 175, 225 ],
      slide: function( evt, ui ) {
          a = [];
          for(var i=0; i<ui.values.length; i++) {
              a.push(ui.values[i]);
          }

          $( "#amount" ).val( "$" + a.join(" - " + "$") );
      }
    });

    $( "#amount" ).val(
      ["$" + $mySlider.slider("values", 0),
       "$" + $mySlider.slider("values", 1),
       "$" + $mySlider.slider("values", 2),
       "$" + $mySlider.slider("values", 3)].join(" - ")
    );
});

小提琴

Answer 2

查看jQuery Slider 插件，我认为它会满足您的需求并且很容易实现。

编辑

要使其只读，您可以在滑块顶部放置一个透明元素，从而防止用户手动移动它。