スライダーで価格を選択

説明補足説明コード分割コード関連書籍コメント投稿

このサンプルは、jQueryのslider()プラグインを利用して 価格の範囲を選択します。サンプルが表示されたら「▲」をドラッグして左右に移動します。左側の「▲」が最長値、右側の「▲」が最大値を選択します。

このサンプルは、jQueryのslider()プラグインを利用して 価格の範囲を選択します。サンプルが表示されたら「▲」をドラッグして左右に移動します。左側の「▲」が最長値、右側の「▲」が最大値を選択します。 

$('.slider4').Slider({
 accept: '.indicator',
 restricted: true,
 opacity: 0.8,
 onSlide: function(procx, procy, x, y) {
  price = parseInt((500 + parseInt(11500 * procx / 100)) / 100) * 100;
  document.getElementById(this.SliderIteration 
   == 0 ? 'minPrice' : 'maxPrice').innerHTML = price;
  },
  values: [[0, 0],[55540, 0]]
});

<p>
  Price range from: 
  <span id="minPrice">500</span>$ to <span id="maxPrice">1200</span>$
</p>

<div class="slider4">
  <div class="indicator" id="indicator1">
     </div>
  <div class="indicator" id="indicator2">
     </div>
</div>