기본 범위 입력의 스타일을 엄지 손가락 전후의 높이로 다르게 지정

기본 HTML 요소의 스타일을 지정하는 것은 까다로울 수 있으며 범위 입력도 다르지 않습니다. 저는 클래식<input type=’range’>을 사용하는 슬라이더 구성 요소를 업데이트하는 임무를 받았습니다.

문제:

::-webkit-slider-runnable-track 및::-webkit-slider-thumb 또는 각각의 Moz 및 MS 버전과 같은 의사 클래스를 통해 트랙 및 썸 스타일 지정에 대해 알고 있을 것입니다. 이것들은 훌륭하고 각각 트랙과 썸의 스타일을 지정할 수 있지만 까다로워지는 것은 내 디자인이 요구하는 것처럼 썸의 양쪽에서 트랙의 높이를 다르게 하고 싶을 때입니다.

내 첫 번째 생각은 “나는 엄지 손가락을 ::before 또는 ::after 그런 식으로 트랙 높이를 변경하겠습니다. 안타깝게도 ::before 및 ::after 의사 요소는 트랙 및 썸에 대한 의사 클래스와 함께 작동하지 않습니다. 글쎄, 이제 어떡해? 트랙의 높이를 변경할 수 있지만 이렇게 하면 전체 트랙의 높이가 설정되므로 원하지 않습니다.

해결책:

엄지손가락의 양쪽에서 트랙의 높이가 서로 다르도록 하려면 background-image 특성에 두 개의 인수를 전달하는 이점을 활용할 수 있습니다. 그러나 이에 대한 주의 사항은 background-image가 직선 색상을 허용하지 않으므로 hex 또는 rgb 값이 허용되지 않는다는 것입니다. 그러나 그라디언트를 허용합니다! 따라서 다음과 같이 할 수 있습니다.

.slider::-webkit-runnable-track {
    background-image: 
       linear-gradient(blue, blue), linear-gradient(blue, blue);
}

파란색만 두 개의 선형 그래디언트를 추가해도 단순히 background-color: blue를 수행하는 것과 지금 당장은 달라 보이지 않지만 다른 배경 속성을 추가하면 마법 같은 일이 일어날 수 있습니다.

우리가 사용할 다른 배경 속성은 background-size , background-repeat 및 background-position 입니다.

.slider::-webkit-runnable-track {
  background-image: 
    linear-gradient(blue, blue), linear-gradient(blue, blue);
  background-repeat: no-repeat no-repeat;
  background-position: left;
  /* background-size: ???? */
}

배경 반복을 no-repeat no-repeat로 설정하면 트랙 색상이 일관되고 위치를 왼쪽 왼쪽으로 설정하면 트랙이 중앙에 배치됩니다.

다음으로 필요한 속성은 background-size이며 여기에 일종의 논리가 필요합니다. 이 예에서는 바닐라 JS 및 CSS 사용자 지정 속성을 사용합니다.

CSS 사용자 지정 속성을 설정한 다음 사용자의 이벤트에 따라 해당 속성 값을 변경해야 합니다. 참고로 이것은 우리가 사용할 HTML 구조입니다.

<div class="wrapper">
  <div class='slider-wrapper'>
    <input class='slider' type="range" max="100" min="0">. 
    </input>
  </div>
</div>

먼저 .css 파일 내에서 변경할 CSS 사용자 지정 속성을 만들어야 합니다. 이를 위해 --valuePercent를 사용하고 있습니다.

.wrapper{
  --valuePercent = 50%;
}
.slider::-webkit-runnable-track {
  background-image: 
    linear-gradient(blue, blue), linear-gradient(blue, blue);
  background-repeat: no-repeat no-repeat;
  background-position: left;
  /* background-size: ???? */
}

이제 CSS 사용자 지정 소품이 생성되었으므로 JS에서 수정할 수 있습니다. 다음으로 슬라이더를 찾습니다.
const slider = document.querySelector('.slider');
그런 다음 이벤트 리스너를 추가하고 해당 리스너가 트리거될 때 실행되는 함수를 만들어야 합니다.

const slider = document.querySelector('.slider');
slider.addEventListener('input', updateValue);
function updateValue(){ 
  const val = slider.value;
  const valPercent = `${val}%`;
  slider.style.setProperty('--valuePercent', valPercent);
}

이것은 <input> 요소이므로 입력 이벤트를 수신할 수 있습니다. 그런 다음 updateValue 함수가 실행되고 슬라이더의 현재 값을 가져오고 이를 백분율 문자열로 변경하고 해당 백분율로 CSS 사용자 지정 소품을 업데이트합니다.

이제 background-size를 사용하여 트랙의 높이가 달라져야 하는 시기를 결정할 수 있습니다!

.wrapper{
  --valuePercent = 50%;
}
.slider::-webkit-runnable-track {
  background-image: 
    linear-gradient(blue, blue), linear-gradient(blue, blue);
  background-repeat: no-repeat no-repeat;
  background-position: left;
  background-size: var(--valuePercent) 5px, 100% 1px;
}

두 개의 배경 이미지가 있으므로 background-size를 사용하여 각 이미지를 다른 너비와 높이로 설정할 수 있습니다. 이제 첫 번째 배경 이미지의 너비는 --valuePercent 이고 높이는 5px입니다. 두 번째 배경 크기는 100% 너비로 설정됩니다. 즉, 전체 트랙이 1px 높이의 영향을 받습니다. 그러나 엄지 손가락의 왼쪽은 5px이므로 우리가 보게 될 것입니다.

이제 우리 트랙은 엄지손가락의 양쪽에 있는 두 개의 다른 높이입니다! 이제 ::-webkit-slider-thumb 및 기타 div 클래스를 사용하여 원하는 대로 스타일을 지정할 수 있습니다. 이 구현은 웹킷만 사용하며 다른 브라우저는 Firefox의 경우 -mz, IE의 경우 -ms와 같이 다른 접두사를 사용합니다.

이 CodePenhere에서 전체 예제를 볼 수 있습니다.