5

私の質問は、1 年前に尋ねられた次の質問に関連しています。

jquery uiスライダーで「ティック」または「ステップ」の数を表示する方法はありますか?

その質問の OP は、スライダーの目盛りの位置に基づいて視覚的なステップを追加する方法を知りたがっていました。解決策は手動であり、動的ティック アプローチでは機能しませんでした。

私の質問は、ロード時に複数のスライダーがロードされ、それぞれが異なるステップで、いつでもステップ数が変わる可能性がある場合です。ステップ div への参照コールバックとして使用でき、各ステップをどこに配置するかを知らせる、私が見落としている可能性のあるスライダー API はありますか。

たとえば、ステップの 1 つが「左: 28%」の場合。その情報は、初期化後にスライダーのどこかに保存され、その下に動的なステップ ビジュアルを作成するためにアクセスできますか?

4

1 に答える 1

0

このコードは、最大値とステップ値に応じて視覚的なステップを作成します。複数のスライダーで機能し、スライダーの作成イベントで視覚的なステップが作成されます。イベントなどで stepvalue を変更した場合は、単にラベル div をクリアして create 関数を再実行できます。

どのように見せたいかによって、div のスタイルを設定する必要があります。

お役に立てれば！

jsフィドル

HTML

<div class="slider-holder">
  <div class="slider"></div>
  <div class="slider-labels"></div>
</div>

CSS

.slider-holder {
  width:500px;
  height:50px;
  margin:auto;
}
.slider-labels {
   position:relative;
}
.slider-labels span {
  position:absolute;
  color:#000;
}

Javascript

$( ".slider" ).slider({
  min: 0,
  max: 100,
  step: 10,
  create : function(event,ui) {
    var maxValue = $(this).slider("option","max");
    var stepValue = $(this).slider("option","step");
    var steps = maxValue/stepValue;
    for(i=0;i<=steps;i++) {
      var val = stepValue*i; 
      $(event.target).next().append('<span style="left:'+val+'%;">'+val+'</span>');
    }
  }
});
于 2013-01-16T22:43:04.757 に答える