JavaScript + Ajax 実践サンプル集 - スライダーで価格を選択

スライダーで価格を選択

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

このサンプルは、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>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <title>jQuery - Slider Price Range </title>
  <link href="jQuery/slider/StyleSheet.css" rel="stylesheet" type="text/css" />
  <script src="jQuery/slider/jquery-1.1.2.js" type="text/javascript"></script>
  <script src="jQuery/slider/interface.js" type="text/javascript"></script>
  <script type="text/javascript">
    $(function() {

$('.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]]
				});

});
  </script>

</head>
<body>
  <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>
  
</body>
</html>

CSS部HEAD部BODY部

ボックス内のスタイルシート(CSS)を外部ファイル(*.css)、またはHTMLドキュメントの<HEAD>セクションの<style>タグ内にコピー＆ペーストしてください。

            

.indicator
{
	width: 16px;
	height: 16px;
	background-color: #FF9900;
	position: absolute;
	font-size: 1px;
	overflow: hidden;
	border: none;
}
.indicator:focus
{
	background-color: #f00;
}

.slider4
{
	width: 316px;
	height: 16px;
	background-image: url(images/slider_back.jpg);
	position: relative;
	border: 0px hidden #000;
}
#indicator1{
	background-image:url(images/indicator1.gif);
	background-color: transparent;
}
#indicator2{
	background-image:url(images/indicator2.gif);
	background-color: transparent;
}
#indicator3{
	background-image:url(images/indicator3.gif);
	background-color: transparent;
}

ボックス内のコードをHTMLドキュメントの<HEAD>セクションにコピー＆ペーストしてください。

            
  <link href="jQuery/slider/StyleSheet.css" rel="stylesheet" type="text/css" />
  <script src="jQuery/slider/jquery-1.1.2.js" type="text/javascript"></script>
  <script src="jQuery/slider/interface.js" type="text/javascript"></script>
  <script type="text/javascript">
    $(function() {

      $('.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]]
				});

    });
  </script>

ボックス内のコードをHTMLドキュメントの<BODY>セクションにコピー＆ペーストしてください。

            
  <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>

コメント・提案の投稿！

名前
メール
件名
本文

JavaScript + Ajax 実践サンプル集 (1496本以上)　◇編集して実行可能◇

jQueryを使い倒せ!　jQueryでAjaxを実装するための基礎知識と実践サンプルを一挙公開中... jQueryテンプレート42選!

スライダーで価格を選択

JavaScript + Ajax 実践サンプル集 (1496本以上) ◇編集して実行可能◇

jQueryを使い倒せ! jQueryでAjaxを実装するための基礎知識と実践サンプルを一挙公開中... jQueryテンプレート42選!

スライダーで価格を選択

JavaScript + Ajax 実践サンプル集 (1496本以上)　◇編集して実行可能◇

jQueryを使い倒せ!　jQueryでAjaxを実装するための基礎知識と実践サンプルを一挙公開中... jQueryテンプレート42選!