スライダーバーの下に数字のメモリを表示する方法

実現したいこと

現在、スライダーを作っています。
スライダーの下に写真のような0 1 2 3 4のようなメモリを
バーの長さと同じ感じで
表示させたいと思っているのですが、なかなかうまく行きません。
理想のような表示にするにはどのようにしたらいいでしょうか？

理想

実際の見え方

該当のソースコード

React.js
1                  <input className="col-8" type="range" name="speed" min="0" max="100" 
2                  value={brightness_value} onChange={handleSliderChange}></input><br></br>
3                  <br></br>
4                  <p>0 1 2 3 4</p>

行動規範の内容に同意します

回答2件

１．pタグの要素の幅をスライダーと一緒にする。
２．pタグを両端ぞろえにする（cssでtext-align: justify;を指定する）
でいかがでしょう。
わかりにくいところがあれば遠慮なく教えてください。

投稿2022/09/19 06:38

shamsham

総合スコア38

自己解決

下記の方法でいけました！

HTML
1<div class="range-container">
2  <input class="range-input" type="range" name="speed" min="0" max="100" />
3
4  <div class="range-marks">
5    <span>0</span>
6    <span>1</span>
7    <span>2</span>
8    <span>3</span>
9    <span>4</span>
10  </div>
11</div>

CSS
1.range-marks {
2  display: flex;
3  justify-content: space-between;
4}
5
6.range-input {
7  width: 100%;
8}
9
10.range-container {
11  width: 300px;
12}