[miniProjects] 44_Custom Range Slider

44_Custom Range Slider

💻 주제 : 0 ~ 100까지 사용자가 범위 값을 조정할 때마다 "input" 이벤트가 발생하며, 이를 활용하여 레이블의 위치와 내용을 업데이트 함.

✨JS

const range = document.getElementById('range')

range.addEventListener('input', (e) => {
  // 숫자로 변환하기 위해 앞에 +를 붙임
  // e.target은 input
  const value = +e.target.value
  // e.target의 다음 형제는 label임
  const label = e.target.nextElementSibling

  const range_width = getComputedStyle(e.target).getPropertyValue('width')
  const label_width = getComputedStyle(label).getPropertyValue('width')

  //2는 p,x
  const num_width = +range_width.substring(0, range_width.length - 2)
  const num_label_width = +label_width.substring(0, label_width.length - 2)

  const max = +e.target.max
  const min = +e.target.min

  const left = value * (num_width / max) - num_label_width / 2 + scale(value, min, max, 10, -10)
  label.style.left = `${left}px`


  label.innerHTML = value
})


// https://stackoverflow.com/questions/10756313/javascript-jquery-map-a-range-of-numbers-to-another-range-of-numbers
const scale = (num, in_min, in_max, out_min, out_max) => {
    return (num - in_min) * (out_max - out_min) / (in_max - in_min) + out_min;
  }

https://stackoverflow.com/questions/10756313/javascript-jquery-map-a-range-of-numbers-to-another-range-of-numbers

• 레이블(label)의 위치를 조정하기 위해 width를 알아야 함. 해당 코드에서 "range" 입력 요소의 값을 조정하면, 레이블의 위치를 해당 값에 맞추어 조정되어야 한다. 레이블이 어디에 위치해야 하는지를 결정하는 데에 width를 사용한다.

• range_width와 label_width를 가져와서 각각 "range" 요소와 "label" 요소의 너비를 구한다.
  이때 가져온 너비 값은 "px" 단위를 포함하므로 숫자만 추출하여 num_width와 num_label_width 변수에 저장한다.

  getComputedStyle

  JavaScript의 DOM(Document Object Model)에서 사용되는 메서드로, 웹 페이지에서 실제로 표시되는 요소의 계산된 스타일을 가져온다. 이 메서드를 사용하면 CSS 스타일 규칙이 적용된 후의 요소의 스타일 값을 얻을 수 있다.

• value, max, min, num_width, num_label_width를 사용하여 레이블의 위치를 계산한다.

😶left 계산

1. value * (num_width / max)
   현재 "range" 입력 요소의 값을 최대 값(max)으로 나눈 비율을 계산한다. 이 비율은 입력 값이 최대 값에 대해 얼마나 큰지를 나타낸다. 이 비율은 0부터 1 사이의 값이 됩니다.

2. num_label_width / 2
   레이블의 너비(num_label_width)를 반으로 나눈 값. 이렇게 함으로써 레이블이 "range" 입력 요소의 중간 위치를 중심으로 배치된다.

3. scale(value, min, max, 10, -10)
   입력 값을 입력 범위(min에서 max)에서 출력 범위(10에서 -10)로 변환하는 scale() 함수를 호출하여 값의 변환을 수행한다.

👍🏻"range" 입력 값에 따라 레이블의 위치를 계산하고, 그 위치를 style.left 속성을 사용하여 조정함으로써 사용자가 선택한 값에 따라 레이블이 움직이게 된다.