質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
UI

UIはUser Interfaceの略であり、人間がコンピュータとやりとりをするためのシステムです。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

Q&A

解決済

1回答

3462閲覧

jQuery UI スライダーで、レンジスライダーを実装したい。

ar_

総合スコア11

UI

UIはUser Interfaceの略であり、人間がコンピュータとやりとりをするためのシステムです。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

0グッド

0クリップ

投稿2018/06/26 03:49

編集2018/06/26 04:23

前提・実現したいこと

ゾゾタウンの左サイドバーにある価格部分のようなレンジスライダーを作りたいです。
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>

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

m.ts10806

2018/06/26 04:04

今現在実装されているコードを提示いただいても良いですか?
guest

回答1

0

ベストアンサー

jqueryui.comのソースをほぼ丸パクリ

CSS

1<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">

javascript

1<script src="https://code.jquery.com/jquery-1.12.4.js"></script> 2<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script> 3<script> 4Array.prototype.getFirstKey=function(num){ 5 return this.map(function(x,y){ 6 return x==num?y:null; 7 }).filter(function(x){ 8 return x!==null; 9 })[0]||null; 10} 11var 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]; 12$(function(){ 13 $( "#slider-range" ).slider({ 14 range: true, 15 min: 0, 16 max: priceValue.length-1, 17 values: [priceValue.getFirstKey(1500),priceValue.getFirstKey(10000)], 18 slide: function( event, ui ) { 19 $( "#amount" ).val( priceValue[ui.values[ 0 ]] + "円 - " + priceValue[ui.values[ 1 ]]+ "円" ); 20 } 21 }); 22 $( "#amount" ).val(priceValue[$( "#slider-range" ).slider( "values", 0 )] + "円 - "+ 23 priceValue[$( "#slider-range" ).slider( "values", 1 )] +"円" ); 24} ); 25</script> 26

HTML

1<p> 2 <label for="amount">Price range:</label> 3 <input type="text" id="amount" readonly style="border:0; color:#f6931f; font-weight:bold;"> 4</p> 5 6<div id="slider-range"></div>

投稿2018/06/26 04:33

yambejp

総合スコア114585

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

ar_

2018/06/26 04:41

ありがとうございます!実装できました!!!助かりました!!!
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問