양방향 range 커스텀 관련 문의 채택완료

</p>

<p><div class="middle">

  <div class="multi-range-slider">

    <input type="range" id="input-left" min="18" max="60" value="18" />

    <input type="range" id="input-right" min="18" max="60" value="60" /></p>

<p>    <div class="slider">

      <div class="track"></div>

      <div class="range"></div>

      <div class="thumb left"></div>

      <div class="thumb right"></div>

    </div>

  </div>

</div></p>

<p>

</p>

<p>body {

  margin: 0;

  padding: 0;

  height: 100vh;

  display: flex;

  justify-content: center;

  align-items: center;

  background-color: #e5e5e5;

}</p>

<p>.middle {

  position: relative;

  width: 50%;

  max-width: 500px;

}</p>

<p>.slider {

  position: relative;

  z-index: 1;

  height: 10px;

  margin: 0 15px;

}

.slider > .track {

  position: absolute;

  z-index: 1;

  left: 0;

  right: 0;

  top: 0;

  bottom: 0;

  border-radius: 5px;

  background-color: #c6aee7;

}

.slider > .range {

  position: absolute;

  z-index: 2;

  left: 0%;

  right: 0%;

  top: 0;

  bottom: 0;

  border-radius: 5px;

  background-color: #6200ee;

}

.slider > .thumb {

  position: absolute;

  z-index: 3;

  width: 30px;

  height: 30px;

  background-color: #6200ee;

  border-radius: 50%;

}

.slider > .thumb.left {

  left: 0%;

  transform: translate(-15px, -10px);

}

.slider > .thumb.right {

  right: 0%;

  transform: translate(15px, -10px);

}</p>

<p>input[type="range"] {

  position: absolute;

  /* opacity로 가린 것을 이벤트도 비활성화하기 위해 */

  pointer-events: none;

  -webkit-appearance: none;

  z-index: 2;

  height: 10px;

  width: 100%;

  opacity: 0;

}

input[type="range"]::-webkit-slider-thumb {

  /* 겹쳐진 두 thumb를 모두 활성화 */

  pointer-events: all;

  width: 30px;

  height: 30px;

  border-radius: 0;

  border: 0 none;

  background-color: red;

  cursor: pointer;</p>

<p>  /* appearance를 해야 위의 스타일들을 볼 수 있음 */

  -webkit-appearance: none;

}</p>

<p>