사용자 지정 이중 범위 슬라이더

사용자 지정 슬라이더를 만들기 위해 기본 입력 유형 범위 중 두 가지를 사용합니다. 간단히 말해서 아이디어는 입력을 숨기고 해당 입력의 값을 기반으로 사용자 지정 슬라이더를 시각적으로 설정/업데이트하는 것입니다.

HTML

우리의 구조는 3개 섹션으로 구성됩니다.

값을 포함하는 텍스트 레이블

입력

사용자 정의 슬라이더(엄지 손가락, 트랙 및 범위)

CSS

주요 아이디어는 입력을 시각적으로 숨기고 입력 위에 사용자 지정 슬라이더 요소를 배치하는 매우 간단합니다.

자바스크립트

사용자 지정 슬라이더를 기본 입력 값으로 초기화하고 수화한 다음 입력 변경 사항을 수신하여 사용자 지정 슬라이더와 레이블을 시각적으로 업데이트할 수 있습니다.

이를 달성하기 위해 몇 가지 함수를 작성할 것입니다.
setLabelValue(label, input) 이 함수는 입력과 함께 레이블을 사용합니다. 레이블 내부 텍스트를 입력 값으로 설정하고 입력 값이 변경될 때마다 실행됩니다.



사용자 정의 슬라이더의 값을 시각적으로 설정하기 위해 논리를 두 함수로 분리합니다. 각 함수는 값을 약간 다르게 계산하기 때문입니다.

시작/왼쪽 기능을 살펴보겠습니다.
setStartValueCustomSlider(inputStart, inputEnd, pseudoEl, range) 시작 값이 inputEnd 값을 넘어가지 않도록 해야 하므로 두 입력을 모두 포함합니다.



코드에서는 다음과 같이 표시됩니다.

 const maximum = Math.min(parseInt(inputStart.value), parseInt(inputEnd.value) - 1);

다음으로 입력 값을 기반으로 백분율을 계산하여 UI를 업데이트합니다.

 const percent = ((maximum - inputStart.min) / (inputStart.max - inputStart.min)) * 100;

이제 현재 위치를 알았으므로 계속 진행하여 엄지손가락과 두 엄지손가락 사이에 있는 범위를 시각적으로 업데이트할 수 있습니다.

pseudoEl.style.left = percent + '%';
range.style.left = percent + '%';

마지막으로 입력 값이 변경될 때마다 이 두 함수를 실행해야 합니다. 각 입력에서 "입력"이벤트를 수신하여 이를 수행합니다.

inputStart.addEventListener('input', () => {
  setStartValueCustomSlider(inputStart, inputEnd, thumbLeft, rangeBetween);
  setLabelValue(labelMin, inputStart);
});

inputEnd.addEventListener('input', () => {
   setEndValueCustomSlider(inputEnd, inputStart, thumbRight, rangeBetween);
   setLabelValue(labelMax, inputEnd);
});

(끝/오른쪽 기능은 매우 유사합니다. 아래 데모에서 확인할 수 있습니다.)

demo

고맙습니다!

당신은 여기에서 나를 찾을 수 있습니다