[JS] 별점 드래그 구현

 

완성본

 

코드

 

 

코드 풀이

<span class="star">
  ★★★★★
  <span>★★★★★</span>
  <input type="range" oninput="drawStar(this)" value="1" step="1" min="0" max="10">
</span>

// JAVASCRIPT CODE
const drawStar = (target) => {
  document.querySelector(`.star span`).style.width = `${target.value * 10}%`;
}
  
  
// JQUERY CODE
const drawStar = (target) => {
  $(`.star span`).css({ width: `${target.value * 10}%` });
}

• 별점 뒤에 숨겨진 input range의 값을 드래그로 조절할 수 있습니다.
• 해당하는 value값만큼 별 width를 늘려주는 방식입니다.

 

먼저 이미지와 같은 요소가 필요합니다.

• 배경이 빈 별과 배경이 찬 별 ( span 태그 )
• range type의 input 태그

 

.star {
  position: relative;
  font-size: 32px;
  color: #ddd;
}

.star input {
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  opacity: 0;
}

.star span {
  width: 0;
  position: absolute;
  left: 0;
  color: red;
  overflow: hidden;
  pointer-events: none;
}

이 요소들을 position 속성을 이용하여 겹쳐줍니다. 그 후 input DOM를 opacity: 0 스타일을 적용시켜 투명화시킵니다.

 

이제 range의 속성인 step과 max을 이용하여 별점의 허용범위를 설정하고, 해당 인풋의 value 값으로 (0 ~ 10) 색이 찬 별의 span DOM의 width 값을 조정해 주면 됩니다.