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

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

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

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

JavaScript

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

HTML

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

Q&A

解決済

1回答

361閲覧

(JavaScript)(html)複数のスライダーで共通の最大値の中で動かしたい

rpr

総合スコア1

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

JavaScript

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

HTML

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

0グッド

0クリップ

投稿2022/07/01 03:28

編集2022/07/05 09:38

htmlでレンジスライダーを4つ設置してその最大値を255にし スライダーAの値が200だとしたら、他のスライダーは255マイナス200の範囲でしか動かせないようにし、その合計値を表示したいです。色々なサイトを見たのですが、リアルタイムで値が反映されなかったりするので、サンプルコードをどなたかいただけな頂けないでしょうか。

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

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

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

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

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

yambejp

2022/07/01 03:32

> スライダーAの値が200だとしたら、他のスライダーは255マイナス100 の範囲でしか動かせない 基準がわかりません。 Aが200で他が255-100?どういう計算根拠でしょう?
rpr

2022/07/01 03:38

誤字していました 正しくは255マイナス200 の範囲ですね
yambejp

2022/07/01 03:43 編集

255マイナス200というのは →-200~255 →55~255 →その他 どれでしょう? A以外のスライダーはAの変化によってminの値が変化しますが 設定できない値になったときにどうすればいいのでしょうか?
rpr

2022/07/01 03:47

255-200になり、ほかのスライダーの最大値が55になるということです。 その次のスライダーは55 - n のような感じです。 minは1 固定です。
yambejp

2022/07/01 04:23 編集

回答して気が付きましたが、各minが1だとAが255になったときmin=1、max=0と逆転しますね minは0じゃないとまずくないですか? もしくはB,C,Dのminが1ならAのmaxは252にするとか・・・
guest

回答1

0

ベストアンサー

こんな感じでしょうか?
調整

javascript

1HTMLInputElement.prototype.input=function(){ 2 const e = new CustomEvent("HTMLEvents"); 3 e.initEvent('input', true, true ); 4 this.dispatchEvent(e); 5} 6document.addEventListener('input',e=>{ 7 const t=e.target; 8 const r=[...document.querySelectorAll('[type=range]')]; 9 if(t.matches('[type=range]')){ 10 if(r.indexOf(t)<r.length-1){ 11 const next=r[r.indexOf(t)+1]; 12 next.max=t.max-t.valueAsNumber+1; 13 next.input(); 14 }; 15 t.nextElementSibling.textContent=t.valueAsNumber; 16 } 17 sum.textContent=r.reduce((x,y)=>x+y.valueAsNumber,0); 18}); 19window.addEventListener('DOMContentLoaded', ()=>{ 20 document.querySelectorAll('[type=range]').forEach(x=>{ 21 x.input(); 22 }); 23}); 24</script> 25A:<input type="range" min="1" max="252" value="1"><span></span><br> 26B:<input type="range" min="1" max="252" value="1"><span></span><br> 27C:<input type="range" min="1" max="252" value="1"><span></span><br> 28D:<input type="range" min="1" max="252" value="1"><span></span><br> 29合計:<span id="sum"></span>

幅を変えない

(微妙におかしいかも)

javascript

1<script> 2HTMLInputElement.prototype.input=function(){ 3 const e = new CustomEvent("HTMLEvents"); 4 e.initEvent('input', true, true ); 5 this.dispatchEvent(e); 6} 7document.addEventListener('input',e=>{ 8 const t=e.target; 9 const r=[...document.querySelectorAll('[type=range]')]; 10 if(t.matches('[type=range]')){ 11 const max=Number(t?.dataset.max??t.max); 12 if(t.valueAsNumber>=max){ 13 t.valueAsNumber=max; 14 } 15 if(r.indexOf(t)<r.length-1){ 16 const next=r[r.indexOf(t)+1]; 17 next.dataset.max=max-t.valueAsNumber+1; 18 next.input(); 19 }; 20 t.nextElementSibling.textContent=t.valueAsNumber; 21 } 22 sum.textContent=r.reduce((x,y)=>x+y.valueAsNumber,0); 23}); 24window.addEventListener('DOMContentLoaded', ()=>{ 25 document.querySelectorAll('[type=range]').forEach(x=>{ 26 x.input(); 27 }); 28}); 29</script> 30A:<input type="range" min="1" max="252" value="1"><span></span><br> 31B:<input type="range" min="1" max="252" value="1"><span></span><br> 32C:<input type="range" min="1" max="252" value="1"><span></span><br> 33D:<input type="range" min="1" max="252" value="1"><span></span><br> 34合計:<span id="sum"></span>

投稿2022/07/01 04:14

編集2022/07/01 05:47
yambejp

総合スコア114572

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

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

rpr

2022/07/01 04:58

ありがとうございます 私の思っていたとおりにできました!!  私が質問した内容ではこれがベストアンサーなのですが、例えばスライダーAを200にした場合、スライダーBは最大値255の長さのうち55の分だけスライドできる (スライダーの途中までスライドできる)ようにするにはどうすればいいですか
yambejp

2022/07/01 05:47

調整してみましたが、微妙におかしいかも、ためしたら感想ください
rpr

2022/07/05 00:38

できました!! 遅くなって申し訳ないです ありがとうございました。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問