前提・実現したいこと
ゾゾタウンの左サイドバーにある価格部分のようなレンジスライダーを作りたいです。
http://zozo.jp/brand/abond/
スライダーのつまみに合わせて下のボックスに数字を表示させる仕様です。
http://jqueryui.com/slider/#range
上記を参考にして、反映させることはできたのですが、
オプションのstep値をゾゾタウンのように途中で変更させたいです。
0→50→100→150→300→500
のような感じです。
該当のソースコード
zozoのソースを見たら下記のような値がしていされているのですが、これをどのように使っているのかがわかりません。
var priceValue=[0,100,500,1000,1500,2000,2500,3000,3500,4000,5000,6000,7000,8000,9000,10000,15000,20000,25000,30000,35000,40000,45000,50000,60000,70000,80000,90000,100000,150000,200000,250000,300000,350000,400000,450000,500000,550000,600000,650000,700000,750000,800000,850000,900000,950000,1000000];
試したこと
stepで指定すると均等にしか動かない。
例えば、
step:50,にすると、
0→50→100→150のような動きになってしまいます。
そもそも途中で値を変更させる場合stepは使わないのでしょうか?
現在のソースコード
<html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>jQuery UI Slider - Range slider</title> <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css"> <link rel="stylesheet" href="/resources/demos/style.css"> <script src="https://code.jquery.com/jquery-1.12.4.js"></script> <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script> </head> <body> <script type="text/javascript"> jQuery(function() { jQuery('#PriceRangeslider').slider({ min: 0, max: 100000, step: 500, range: true, values: [0, 100000], slide: function(e, ui) { jQuery('#PriceMin').val(ui.values[0]); jQuery('#PriceMax').val(ui.values[1]); }, change: function(e, ui) { jQuery('#PriceMin').val(ui.values[0]); jQuery('#PriceMax').val(ui.values[1]); }, create: function(e, ui) { var values = jQuery(this).slider('option', 'values') jQuery('#PriceMin').val(values[0]); jQuery('#PriceMax').val(values[1]); } }); }); </script> <form action="" method="" name=""> <input id="PriceMin" class="min_price_" type="text" />〜 <input id="PriceMax" class="max_price_" type="text" /> <div id="PriceRangeslider" class="range_slider_" style="width:180px;"></div> </form> </body> </html>
回答1件
あなたの回答
tips
プレビュー