jquery - jQuery表示水平スケール複数マーカー

Question

水平スケール ラインに 4 つの値を表示する jQuery ソリューションを探しています。値は、最小、最大、平均、および現在です。2 次元グラフではありません。マーカーがそれらのポイントを指している、単一の水平線上の単純な 4 つのポイント。

私が達成しようとしていることを示すために、ここにスケッチがあります

Answer 1

最初に頭に浮かんだのは、jQueryUIスライダーでした。複数のハンドルをサポートしており、表示目的のみの場合は無効にすることができます。

$(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 pluginをチェックしてください。あなたのニーズに合っていて、簡単に実装できると思います。

編集

読み取り専用にするには、スライダーの上に透明な要素を配置して、ユーザーが手動で移動できないようにします。