jQuery显示水平比例多标记

Question

我正在寻找jQuery Solution来在水平刻度线上显示4个值。值为Minimum，Maximum，Average和Current。它不是二维图。在一条水平线上只有一个简单的4个点，标记指向这些点。

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

Answer 1

我想到的第一件事是jQuery UI slider。它支持多个句柄，如果仅用于显示目的，您可以将其禁用。

$(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(" - ")
    );
});

Fiddle

Answer 2

查看jQuery Slider plugin，我认为它会满足您的需求，并且可以轻松实施。

编辑

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