CSS를 사용하여 사용자 정의 범위 슬라이더를 만드는 방법

Pure CSS는 멋진 사용자 정의 범위 슬라이더를 만듭니다. 이 기사는 접근성을 보장하면서 JavaScript에 의존하지 않고 CSS 및 기본 HTML

요소 만 사용하여 사용자 정의 스코프 슬라이더를 만드는 방법을 보여줍니다. 튜토리얼에는 브라우저 기본 스타일을 재설정 및 비활성화하는 등 입력 요소를 사용자 정의하고 슬라이더 스타일 설정 및 를 사용하여 슬라이딩 그라디언트 효과 생성을 포함하여 입력 요소를 사용자 정의하는 방법을 다룹니다. 또한 클릭하면 경계 전용 원에서 슬라이더를 전체 원으로 변환하고 호버링시 색상을 어둡게하는 등 사용자 상호 작용을 향상시키기 위해 미묘한 애니메이션을 추가하는 방법에 대해 설명합니다. 이 기술은 기본 기능을 유지하고 키보드 내비게이션을 지원하여 맞춤형 범위 슬라이더를위한 다목적이고 액세스 할 수있는 솔루션을 제공합니다.

<input type="range"> 키 포인트 : border-image

순수한 CSS 및 기본 html 요소를 사용하여 사용자 정의 스코프 슬라이더를 만듭니다. 튜토리얼에는 입력 요소를 사용자 정의하는 단계가 포함되어 있습니다. 브라우저 기본 스타일을 재설정하고 비활성화하고 슬라이더 스타일을 설정하며 를 사용하여 슬라이딩 그라디언트 효과를 만듭니다.

클릭 할 때 슬라이더 모양을 변경하고 호버링시 색상을 변경하는 등 사용자 경험을 향상시키기 위해 미묘한 애니메이션을 추가하십시오. 접근성을 보장하기 위해 기본 기능을 유지하고 키보드 탐색을 지원하십시오.

기본 범위 슬라이더 스타일은 아름답 지 않습니다. 다음 그림은 Chrome, Firefox 및 Safari 브라우저에서 기본 범위 슬라이더의 디스플레이 효과를 보여줍니다.

• <input type="range"> 그러나 요소는 스타일이 어렵습니다. 대부분의 온라인 솔루션은 JavaScript 및 Verbose Code에 의존합니다. 더 나쁜 것은, 일부 기술은 또한 요소의 접근성을 파괴 할 수 있습니다. 따라서 접근성에 영향을 미치지 않고 순수한 CSS를 더 잘 활용하는 방법을 살펴 보겠습니다. 다음 Codepen 데모는 우리가 구축 할 내용을 보여줍니다.
범위 입력 요소의 구조
• border-image 먼저 범위 입력 요소의 구조를 분석하겠습니다. 기본 요소이며 각 브라우저에는 자체 구현이 있습니다. WebKit 및 Blink 브라우저 (예 : Chrome, Edge, Safari 및 Opera)의 두 가지 주요 구현이 있습니다.
Firefox를위한 또 다른 하나 :

IE는 또한 세 번째 구현이 있지만 운 좋게도이 브라우저는 거의 사라졌습니다! 브라우저 간의 불일치로 인해 각 구현마다 다른 스타일을 제공해야하기 때문에 작업이 어려워집니다. 이 게시물이 끝나지 않기 때문에이 자세로 들어 가지 않을 것이지만, 더 심층적 인 탐색을 위해 Ana Tudor 의이 게시물을 읽는 것이 좋습니다 (게시물 링크는 여기에 삽입되어야 함). 구현에 관계없이 "슬라이더"(썸)은 항상 공통 구성 요소라는 것을 기억하면됩니다.

첫 번째 단계는 모든 브라우저 기본 스타일을 재설정하고 비활성화하기 위해

및 기타 공통 속성을 사용하는 것입니다.

보다 복잡한 경우 다른 기본 스타일이 요소에 적용되면 더 많은 코드를 추가해야 할 수도 있습니다. 시각적 스타일이없는 "알몸"요소가 있는지 확인하십시오. 또한 범위 슬라이더에 대해 다른 변형을 쉽게 만들 수 있도록 일부 CSS 변수를 정의해 봅시다.

이 단계에서는 슬라이더와 기본 스타일 만 표시됩니다. 슬라이더 요소 스타일을 설정

슬라이더 요소를 스타일로 만들어 봅시다. 기본 설정으로 시작하겠습니다 : appearance: none

사용

<code class="language-html"><input type="range" min="0" max="100" step="1" value="20"></code>

<code class="language-html"><input type="range" min="0" max="100" step="1" value="20"></code>

를 추가하십시오 이제 우리는 매직 CSS 트릭을 사용하여 슬라이더를 완성 할 것입니다. 여기에는

: 의 사용이 포함됩니다

환각은 입력 요소에

를 추가하고 더 큰 값을 사용하여 완벽합니다. 일부 애니메이션을 추가하십시오

슬라이더와 상호 작용할 때 미묘한 애니메이션을 추가 할 수 있습니까? 많은 코드가 필요하지 않으며 슬라이더의 UX를 향상시킵니다. 먼저, 슬라이더를 경계 전용 원에서 클릭하면 전체 원으로 변환합니다. 이렇게하기 위해 값을 추가합니다.

<code class="language-css">input {
  appearance: none;
  background: none;
  cursor: pointer;
}</code>

결론

우리는 그것을 수행했으며 복잡한 브라우저 관련 구현을 처리 할 필요가 없습니다! 슬라이더 요소의 선택기를 식별하고 일부 CSS 트릭을 사용하여 슬라이더의 전체 범위를 스타일링했습니다. 잊지 마십시오. 우리는 border-image 요소 만 사용하므로 기본 기능을 유지하므로 접근성 문제에 대해 걱정할 필요가 없습니다. 슬라이더는 아무런 문제없이 키보드 내비게이션을 지원합니다. 다음은 동일한 기술로 생성 된 슬라이더의 더 많은 예입니다. 코드 펜 링크

위 내용은 CSS를 사용하여 사용자 정의 범위 슬라이더를 만드는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!