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

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

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

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

Q&A

解決済

2回答

2201閲覧

input rangeのつまみの横に文字を表示

rfd

総合スコア2

JavaScript

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

0グッド

0クリップ

投稿2021/09/20 23:30

編集2021/09/21 00:36

input rangeのつまみの横に文字を表示させてます
つまみにあわせて文字の位置も変えます

つまみを動かすたびに左側に寄ってきてしまいます(数値を小さくすると逆に右側に寄る)

つまみを動かしても均等の間隔を保つにはどうしたらいいでしょうか

<div style="position:relative;width:50%"> <input type="range" value="0" step="1" max="100" min=0 onChange="p=Number(this.value);p=p+30;aaa.style.left=p+'px';"> <span id="aaa" style="background:red;height:100%;position:absolute;left:30px;top:5px;pointer-events:none">aaaa</span>

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

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

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

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

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

int32_t

2021/09/20 23:59

どのブラウザで問題が発生しますか。
rfd

2021/09/21 00:00

Firefoxです
guest

回答2

0

ベストアンサー

修正

rangeのつまみはブラウザによって実装が違うため共通デザインにしないと
つまみからのオフセットは確定できません

javascript

1<style> 2[type=range]{ -webkit-appearance: none; } 3[type=range]::-webkit-slider-runnable-track{ 4 height: 5px; 5margin-top:8px; 6background: gray; 7} 8[type="range"]::-webkit-slider-thumb{ 9 -webkit-appearance: none; 10 width: 30px; 11 height: 30px; 12 margin-top: -15px; 13background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" height="30" width="30"><circle cx="15" cy="15" r="15" fill="lime" /><text x="8" y="20" fill="black" >丸</text></svg>') no-repeat 0 0; 14} 15 16/*firefox*/ 17[type=range]::-moz-range-track{ 18 height: 5px; 19 background: gray; 20} 21[type="range"]::-moz-range-thumb{ 22 width: 30px; 23 height: 30px; 24 margin-top: -15px; 25 background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" height="30" width="30"><circle cx="15" cy="15" r="15" fill="lime" /><text x="8" y="20" fill="black" >丸</text></svg>') no-repeat 0 0; 26} 27#aaa{ 28background-Color:red; 29position:absolute; 30top:0; 31pointer-events:none; 32} 33#r{ 34width:800px; 35} 36#wrap{ 37position:relative; 38} 39</style> 40<script> 41window.addEventListener('DOMContentLoaded', ()=>{ 42 const offset=10; 43 const handle=30; 44 const w=r.offsetWidth; 45 const max=r.max; 46 aaa.style.left=offset+handle; 47 r.addEventListener('input',()=>{ 48 const p=r.value; 49 aaa.style.left=`${(w-handle)*p/max+offset+handle}px`; 50 }); 51}); 52</script> 53<div id="wrap"> 54<input id="r" type="range" value="0" step="1" max="100" min="0"> 55<span id="aaa">aaaa</span> 56</div>

投稿2021/09/21 00:57

編集2021/09/22 01:40
yambejp

総合スコア116738

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

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

rfd

2021/09/21 19:58

文字が中央に表示されてるのですが30px右側にづらして表示したいのですがどうしたらいいでしょうか?
yambejp

2021/09/22 01:41

修正版あげました 逆につまみを自作するならつまみの上に文字を書けばよいですね
rfd

2021/09/22 05:43

こんにちは ありがとうございます margin-top: -15px;はどういう意味でしょうか? これを無くして、同じ動作は不可能でしょうか?
yambejp

2021/09/22 05:46 編集

firefoxはなくても大丈夫そうですね chromeやedgeで確認してみてください ないと丸が下がって表示されます
rfd

2021/09/22 06:57

data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" height="30" width="30"> width,heightをサイズ指定してるのがミソなんですね どうもありがとうございました!
rfd

2021/09/22 07:13

もう一つ教えていただきたいのですが <input id="r" type="range" value="50" step="1" max="100" min="0"> 初期値をvalue="50"にした場合50の地点から文字を表示させるにはどうしたらいいんでしょうか?
yambejp

2021/09/22 07:22

rangeのmin/maxを任意に指定するならこんな感じで window.addEventListener('DOMContentLoaded', ()=>{ const offset=10; const handle=30; const w=r.offsetWidth; const min=r.min; const max=r.max; aaa.style.left=offset+handle; r.addEventListener('input',()=>{ const p=r.value; aaa.style.left=`${(w-handle)*(p-min)/(max-min)+offset+handle}px`; }); });
rfd

2021/09/22 07:27

すみません素人で inputの外側でやりたいのですが 例えばこんな感じです window.addEventListener('DOMContentLoaded', ()=>{ const offset=10; const handle=30; const w=r.offsetWidth; const min=r.min; const max=r.max; r.value="50"; aaa.style.left=`${(w-handle)*(p-min)/(max-min)+offset+handle}px`;//ページ読み込み時に50%の地点に文字を表示したい r.addEventListener('input',()=>{ const p=r.value; aaa.style.left=`${(w-handle)*(p-min)/(max-min)+offset+handle}px`; }); });
yambejp

2021/09/22 07:43 編集

あー、minの値が50で始まるのではなく、値が50をデフォルトにしたいということですね ちょっと勘違いしていました window.addEventListener('DOMContentLoaded', ()=>{ const offset=10; const handle=30; const w=r.offsetWidth; const min=r.min; const max=r.max; r.value=50; const set_left=(p)=>(w-handle)*(p-min)/(max-min)+offset+handle; aaa.style.left=set_left(r.value); r.addEventListener('input',()=>{ const p=r.value; aaa.style.left=`${set_left(r.value)}px`; }); });
rfd

2021/09/22 08:04

無事動きました。 計算式やら、自分ではどうにもできない部分だったので助かりました。 aaa.style.left=set_left(r.value); これはなぜかaaa.style.left=set_left(r.value)+"px";としないと設定できなかったみたいです ありがとうございました!
guest

0

<input type=range>の0から100までの値を文字の横座標にセットしていますが、<input type=range>の幅は100pxとは限りません。また、つまみ部分の幅もあります。<input type=range>の幅が W、つまみの幅が T とすると、

  • 値が0のとき→つまみの中心は T / 2
  • 値が100のとき→つまみの中心は W - T / 2

ということを考慮してテキストの位置を決める必要があります。

つまみ部分の幅 T はブラウザ・OSによって異なるので、どの環境でもうまく行くようにするのはたいへんかもしれません。

投稿2021/09/21 00:50

int32_t

総合スコア21697

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

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.35%

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

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

質問する

関連した質問