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

Question

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>

Comments

[int32_t]

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

[rfd]

Firefoxです

Answer 1

修正

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

<style>
[type=range]{ -webkit-appearance: none; }
[type=range]::-webkit-slider-runnable-track{
  height: 5px;
margin-top:8px;
background: gray;
}
[type="range"]::-webkit-slider-thumb{
  -webkit-appearance: none;
  width: 30px;
  height: 30px;
  margin-top: -15px;
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;
}

/*firefox*/
[type=range]::-moz-range-track{
  height: 5px;
  background: gray;
}
[type="range"]::-moz-range-thumb{
  width: 30px;
  height: 30px;
  margin-top: -15px;
  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;
}
#aaa{
background-Color:red;
position:absolute;
top:0;
pointer-events:none;
}
#r{
width:800px;
}
#wrap{
position:relative;
}
</style>
<script>
window.addEventListener('DOMContentLoaded', ()=>{
  const offset=10;
  const handle=30;
  const w=r.offsetWidth;
  const max=r.max;
  aaa.style.left=offset+handle;
  r.addEventListener('input',()=>{
    const p=r.value;
    aaa.style.left=`${(w-handle)*p/max+offset+handle}px`;
  });
});
</script>
<div id="wrap">
<input id="r" type="range" value="0" step="1" max="100" min="0">
<span id="aaa">aaaa</span>
</div>

Comments

[rfd]

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

[yambejp]

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

[rfd]

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

[yambejp]

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

[rfd]

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

[rfd]

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

[yambejp]

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]

すみません素人で 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]

あー、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]

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

Answer 2

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

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

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

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