수치 Slide란?

이는 말로 하기엔 애매한 부분이 있어서, 결과물을 먼저 보면 이해가 쉬울 것이다. 아래와 같이 볼륨이나 기타 값들을 slide를 통해 구현하는 법을 보자.

JSX부분

이를 구현하기 위해 input 태그에서 range라는 것을 이용할 것이다. range는 기존에 있던 것으로 slide의 기능을 해준다.

여기서 쓰이는 간단한 문법에 대해 알아보자
1. min, max => 이는 포인터가 움직일 수 있는 크기로 min~max까지 이동가능하게 된다.
2. step => 움직일때 최소 단위
3. value => 바꿀 값
4. onChange => 바꾼 값을 어떻게 할 것인지 정하는 부분

 <input
          type="range"
          min={0}
          max={200}
          step={5}
          value={BPM}
          onChange={(event) => {
            setBPM(event.target.valueAsNumber);
          }}
        />

CSS부분

위에서 설명한 input 태그안에 range는 이미 만들어진 design이 있어서 이를 바꿔주는 것이 필요하다.

// 기존에 있던 design을 없애주는 역할
input[type="range"] {
  width: 100%;
  -webkit-appearance: none;
  background: transparent;
}

// 사용자가 움직이는 포인터 역할
input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  background: #564b9a;
  cursor: pointer;
  height: 18px;
  width: 18px;
  margin-top: -10px;
  border-radius: 50%;
}

// 포인터가 움직이는 track 역할
input[type="range"]::-webkit-slider-runnable-track {
  width: 100%;
  height: 3px;
  cursor: pointer;
  border-radius: 1.3px;
  border: 0.2px solid #f2f4f6;
}

// 포인터를 눌렀을때 track의 역할
input[type="range"]:focus::-webkit-slider-runnable-track {
  background: #f2f4f6;
}