0
私はdivで基本的なスライダーを作成しようとしています。私はその構造を持っています。flex-growth divを位置内に制限する方法：相対divs？
私はボタンをleftまたはrightプロパティを使用する場合、それは移動する必要がありますように、私はクラスにボタン1 buttpn2と範囲と呼ばれるslider 3人の子供divを親divを持っている、と私はdisplay: relativeにボタンをしたいです。
私はそれがposition: relativeであることを認識しましたが、希望のスライダー効果をどのようにするのですか？
コード：https://jsfiddle.net/L0bjqdee/
.slider {
width: 300px;
height: 5px;
background-color: #a0a0a0;
display: flex;
align-items: center;
}
.slider div {
display: inline-block;
}
.button {
width: 10px;
height: 10px;
border-radius: 5px;
background-color: red;
position: relative;
}
#button1 {
left: 25px;
}
#button2 {
right: 50px;
}
.button:hover {
cursor: pointer;
}
.range {
flex-grow: 2;
height: 5px;
background-color: blue;
}<div class="slider">
<div class="button" id="button1"></div>
<div class="range"></div>
<div class="button" id="button2"></div>
</div>
青い部分は赤いボタンの間にする必要があります！ – Rahul
私はちょうどあなたが尋ねたことを手伝っているだけで、あなたのためのすべての仕事をするつもりはありません！ – James