멀티 룸 슬라이더 : 일반적인 경우

이 두 부분으로 구성된 시리즈의 첫 번째 부분은 우리가 2 턴 슬라이더를 얻는 방법을 자세히 설명했습니다. 이제 우리는 일반적인 멀티 덤프 케이스를 살펴 보지만 엄지 사이에 채우기를 만드는 다른 기술과 더 나은 기술로 볼 것입니다. 그리고 마지막으로, 우리는 스타일링이 현실적인 3D처럼 보이는 슬라이더와 평평한 슬라이더의 방법에 뛰어 들었습니다.

기사 시리즈 :

1. 멀티 룸 슬라이더 : 특정 2 차 사례
2. 멀티 룸 슬라이더 : 일반적인 케이스 (이 게시물)

더 좋고 유연한 접근 방식입니다

범위 입력과 동일한 영역을 커버하는 래퍼 의사 유전체에서 각 엄지 손가락에 해당하는 왼쪽으로 오른쪽 선형 등급 () 레이어를 쌓는다 고 가정 해 봅시다. 각 구배 층은 완전히 불투명합니다 (즉, 알파는 1) 트랙에서 엄지 손가락의 중간선까지, 그 후에는 완전히 투명합니다 (즉, 알파는 0입니다).

RGB 값은 우리가 관심을 갖는 모든 것이 알파 값이기 때문에 중요하지 않습니다. 나는 개인적으로 코드에서 빨간색 (완전히 불투명 한 부분)과 투명한 키워드를 사용하여 최소한 양의 문자로 작업을 수행하기 때문입니다.

우리는 완전히 불투명 한 곳에서 완전히 투명하게가는 그라디언트 정지 위치를 어떻게 계산합니까? 글쎄,이 위치는 항상 왼쪽 가장자리의 엄지 반경과 오른쪽 가장자리의 엄지 반경 사이에 위치하므로 유용한 너비 (트랙 너비, 엄지 직경을 빼고)와 같은 범위 내에 있습니다.

즉, 먼저 엄지 반경을 추가 한 다음 현재 썸 위치와 최소값과 최대 값과 최소값의 차이 (-디프)의 차이를 나누어 진행 상황을 계산합니다. 이 진행 상황 값은 [0, 1] 간격의 숫자입니다. 즉, 현재 엄지 손가락 위치가 슬라이더의 최소값 인 경우, 현재 썸 위치가 슬라이더의 최대 값에있을 때 1입니다. 우리가 유용한 폭 간격을 정확히 따라 가기 위해, 우리는이 진행률 값에 유용한 너비를 곱합니다.

우리가 후에 위치하는 위치는이 두 길이 값 사이의 합계입니다.

아래의 데모를 통해 2D보기에 모든 것이 어떻게 쌓여 있는지, 부모의 의사 요소의 범위 입력과 그라디언트가 3D 뷰에서 어떻게 계층화되는지 알 수 있습니다. 또한 대화식이므로 슬라이더 엄지 손가락을 드래그하고 해당 충전물 (부모의 의사 요소에 대한 그라디언트 층으로 생성)이 어떻게 변하는 지 확인할 수 있습니다.

Codepen의 Thebabydino (@thebabydino)의 펜을 참조하십시오.

데모는 Chrome과 Firefox에서 가장 잘 볼 수 있습니다.

좋아, 그러나 단순히 이러한 구배 층을 쌓는 것은 우리가 후에 결과를 제공하지 않습니다.

여기서 솔루션은 이러한 그라디언트 마스크 층을 만들고 xor (CSS 마스크의 경우 더 정확하게는 알파를 xor)하는 것입니다.

XOR의 작동 방식에 대한 새로 고침이 필요한 경우, 여기에 하나가 있습니다. 두 개의 입력이 주어지면 입력 값이 다른 경우이 작업의 출력은 1입니다 (그 중 하나는 1이고 다른 하나는 0), 입력 값이 동일하다면 (둘 다 모두 0이거나 두 가지 모두 1).

XOR 작업의 진실 테이블은 다음과 같이 보입니다.

입력		산출
에이	비
0	0	0
0	1	1
1	0	1
1	1	0

또한 다음 대화 형 데모에서 입력 값을 전환하고 출력이 어떻게 변경되는지 확인할 수 있습니다.

Codepen의 Thebabydino (@thebabydino)의 펜을 참조하십시오.

우리의 경우 입력 값은 수평 축을 따라 구배 마스크 층의 알파입니다. XOR-ing 다중 레이어는 바닥에서 처음 두 개에 대해 그렇게 한 다음 이전 XOR 작동 결과 등으로 바닥에서 XOR-ing을 의미합니다. 알파가 1에 1에 이르는 왼쪽에서 오른쪽으로 그라디언트의 특정한 경우 (해당 엄지 값에 따라 결정) 0은 아래 그림과 같이 보입니다 (바닥에서 시작하여 길을 따라 작동합니다).

바닥의 ​​두 층이 알파의 알파가 1 인 경우, xor-ing 후 우리가 얻는 결과 층의 알파는 0입니다. 여기서 알파 값이 다른 곳에서는 알파의 알파가 0의 알파를 가지며, 결과 층의 알파는 0입니다.

위로 올라가서, 우리는 이전 단계에서 얻은 결과 레이어와 함께 세 번째 레이어를 xor합니다. 이 두 층이 동일한 알파를 갖는 경우,이 두 번째 XOR 작동에서 발생하는 층의 알파는 0입니다. 여기서 알파가 다른 경우, 결과 알파는 1입니다.

마찬가지로, 우리는 두 번째 단계 XOR 작동으로 인한 층으로 바닥에서 네 번째 층을 xor.

CSS의 관점에서, 이는 표준 마스크 복합체의 배제 값과 비표준 -webkit-mask-composite의 XOR 값을 사용하는 것을 의미합니다. (마스크 합성에 대한 이해를 높이려면 충돌 코스를 확인하십시오.)

이 기술은 우리가 원하는 결과를 정확하게 제공하면서 모든 필에 대한 단일 의사 요소를 사용할 수있게 해주었다. 또한 모든 엄지 손가락에 맞는 기술이기도합니다. 코드에 어떻게 넣을 수 있는지 봅시다!

물건을 완전히 유연하게 유지하기 위해 퍼그 코드를 변경하여 엄지 손가락을 추가하거나 제거하고 모든 객체 배열에서 항목을 추가하거나 제거하여 모든 객체가 값과 레이블 (화면 독자에게만 해당)을 포함하는 단순히 그에 따라 다른 모든 것을 업데이트 할 수 있도록 시작합니다.

 - 최소 = -50, max = 50을하자;
- let jumms = [
- {val : -15, lbl : 'value a'}, 
- {val : 20, lbl : 'value b'}, 
- {val : -35, lbl : 'value c'}, 
- {val : 45, lbl : 'value d'}
-];
-NV = thumbs.length;

.wrap (role = 'Group'aria-labelledby = 'multi-lbl' 
      style =`$ {humbs.map ((c, i) =>`--v $ {i} : $ {c.val}`) .join ( ';')}; 
             -Min : $ {min}; -max : $ {max}`)
  #Multi-LBL Multi Thumb 슬라이더 :
    - for (i = 0; i <nv i label.sr .lbl min value="thumbs" .val max="max)" : var><p> 이 정확한 네 값의 특정 경우 생성 된 마크 업은 다음과 같습니다.</p>
<pre rel="HTML"> <div class="'랩'역할" :>
  <div id="'multi-lbl'"> 멀티 썸 슬라이더 : </div>
  <label class="'sr-only'for"> value a </label>
  
  <output for="'v0'style" : var> </output>
  <label class="'sr-only'for"> value b </label>
  
  <output for="'v1'style" : var> </output>
  <label class="'sr-only'for"> value c </label>
  
  <output for="'v2'style" : var> </output>
  <label class="'sr-only'for"> value d </label>
  
  <output for="'v3'style" : var> </output>
</div>

슬라이더를 드래그 할 때

값이 업데이트되는 기능적 슬라이더를 제공하기 위해 CSS 또는 JavaScript에 아무것도 추가 할 필요가 없습니다. 그러나 래퍼의 그리드에는 여전히 두 개의 열이있는 동안 4 개의

요소가 있으면 레이아웃이 나옵니다. 따라서 현재로서는

요소에 소개 된 행을 제거하고 이러한 요소를 절대적으로 배치하고 해당 에 초점을 맞출 때만 보이게합니다. 또한 래퍼의 의사 요소를 모두 사용하는 이전 솔루션의 유적을 제거합니다.

 .포장하다 {
  / * 이전과 동일 */
  그리드-템플릿 열 : MAX-CONTENT #{$ H}; / * 지금 2 줄 만 */

  &::후에 {
    배경 : #95A;
    // 콘텐츠: ''; // 지금은 표시되지 않습니다
    그리드-컬럼 : 1/ 스팬 2;
    그리드 행 : 3;
  }
}

입력 [type = 'range'] {
  / * 이전과 동일 */
  그리드 행 : 2; / * 마지막 줄은 이제 두 번째 줄 */
}

출력 {
  색상 : 투명;
  위치 : 절대;
  오른쪽 : 0;
	
  &::후에 {
    내용 : 카운터 (c);
    카운터 리셋 : C var (-c);
  }
}

우리는 나중에 결과를 예측하기 위해 더 많은 일을 할 것이지만, 지금은 다음과 같습니다.

Codepen의 Thebabydino (@thebabydino)의 펜을 참조하십시오.

다음으로, 우리는 그 엄지 손가락을 엄지 손가락으로 채워야합니다. 우리는 퍼그에서 마스크 레이어를 생성하고 래퍼에 포괄적 인 특성에 넣음으로써이를 수행합니다.

 //- 이전과 동일합니다
-let layers = thumbs.map ((c, i) =>`linear-gradient (90deg, red calc (var (-r) (var (-v $ {i})-var (-min))*var (-uw)), transparent 0)`);

.wrap (role = 'Group'aria-labelledby = 'multi-lbl' 
  style =`$ {humbs.map ((c, i) =>`--v $ {i} : $ {c.val}`) .join ( ';')}; 
    -Min : $ {min}; -max : $ {max};
    -fill : $ {layers.join ( ',')}`)
  //- 이전과 동일합니다

이 값을 가진 4 개의 엄지 손가락의 특정 사례에 대해 생성 된 HTML은 아래에서 볼 수 있습니다. 초기 배열에서 항목을 추가하거나 제거하면 자동으로 변경됩니다.

 <div class="'랩'역할" : red calc>
  <div id="'multi-lbl'"> 멀티 썸 슬라이더 : </div>
  <label class="'sr-only'for"> value a </label>
  
  <output for="'v0'style" : var> </output>
  <label class="'sr-only'for"> value b </label>
  
  <output for="'v1'style" : var> </output>
  <label class="'sr-only'for"> value c </label>
  
  <output for="'v2'style" : var> </output>
  <label class="'sr-only'for"> value d </label>
  
  <output for="'v3'style" : var> </output>
</div>

이는 치수와 관련된 SASS 변수를 CSS 변수로 바꾸고 사용하는 속성의 SASS 변수를 대체해야한다는 것을 의미합니다.

 .포장하다 {
  / * 이전과 동일 */
  -w : 20em;
  -H : 4EM;
  --d : calc (.5*var (-h));
  ---2 : calc (.5*var (-d));
  -UW : calc (var (-w)-var (-d));
  배경 : 선형 그레이드 (0DEG, #CCC var (-H), 투명 0);
  그리드-템플릿 : Max-Content var (-h)/ var (-w);
  너비 : var (-w);
}

우리는 마스크를 래퍼를 설정합니다 :: pseudo element :

 .포장하다 {
  / * 이전과 동일 */
  
  &::후에 {
    콘텐츠: '';
    배경 : #95A;
    그리드-컬럼 : 1/ 스팬 2;
    그리드 행 : 2;

    / * 비표준 WebKit 버전 */
    -webkit-mask : var (-채우기);
    -webkit-mask-composite : xor;

    / * Firefox에서 지원되는 표준 버전 */
    마스크 : var (-채우기);
    마스크 복합 : 제외;
  }
}

이제 우리는 정확히 우리가 원하는 것을 가지고 있으며이 기술에 대한 정말 멋진 점은 엄지 손가락의 수를 변경하기 위해해야 ​​할 일은 엄지 객체 (각각의 값과 레이블이있는)를 퍼그 코드의 엄지 손가락 배열로 추가 또는 제거하는 것입니다.

Codepen의 Thebabydino (@thebabydino)의 펜을 참조하십시오.

예열 조정

우리가 지금까지 가지고있는 것은 꽤 광경 일뿐입니다. 그래서 그것을 고치기 시작합시다!

옵션 #1 : 현실적인 모습

아래 결과를 달성하고 싶다고 가정 해 봅시다.

첫 번째 단계는 트랙을 엄지 손가락과 같은 높이로 만들고 트랙 끝을 둥글게 만드는 것입니다. 이 시점까지, 우리는 .wrap 요소의 배경으로 트랙을 모방했습니다. 층형 선형 및 방사형 구배를 사용하여 둥근 끝으로 트랙을 모방하는 것이 기술적으로 가능하지만, 특히 래퍼에 여전히 무료 의사 요소가있을 때 가장 좋은 솔루션은 아닙니다 (:: 이전).

 .포장하다 {
  / * 이전과 동일 */
  -H : 2EM;
  --d : var (-h);
  
  & :: 이전, & :: 이후 {
    Border-Radius : var (-r);
    배경 : #CCC;
    콘텐츠: '';
    그리드-컬럼 : 1/ 스팬 2;
    그리드 행 : 2;
  }
  
  &::후에 {
    배경 : #95A;

    / * 비표준 WebKit 버전 */
    -webkit-mask : var (-채우기);
    -webkit-mask-composite : xor;

    / * Firefox에서 지원되는 표준 버전 */
    마스크 : var (-채우기);
    마스크 복합 : 제외;
  }
} 

Codepen의 Thebabydino (@thebabydino)의 펜을 참조하십시오.

사용 :: 트랙을 모방하기 전에 약간 3D 모양을 얻을 가능성이 열립니다.

 <pre rel="scss"> <code> .wrap {
  / * 이전과 동일 */
  
  & :: 이전, & :: 이후 {
    / * 이전과 동일 */
    Box-Shadow : inset 0 2px 3px rgba (#000, .3);
  }
  
  &::후에 {
    / * 이전과 동일 */
    배경: 
      Linear-Gradient (RGBA (#fff, .3), RGBA (#000, .3))
      #95A;
  }
}</code>

나는 결코 디자이너가 아니므로 그 값은 아마도 더 나은 결과를 얻기 위해 조정 될 수 있지만 이미 차이를 볼 수 있습니다.

Codepen의 Thebabydino (@thebabydino)의 펜을 참조하십시오.

이것은 우리에게 정말 못생긴 엄지 손가락을 남겨 두므로 그 부분도 수정합시다!

우리는 다른 배경 클립 (및 배경 오리핀) 값으로 여러 배경을 레이어링하는 기술을 사용합니다.

 @mixin thumb () {
  테두리 : 단단한 calc (.5*var (-r)) 투명;
  국경-라디우스 : 50%; / * 원형 만들기 */
  박스 사이징 : 국경 박스; / * Chrome & Firefox의 다르게 */
  / * 상자 크기가 필요합니다. 이제 우리는 0이 아닌 테두리가 있으므로 */
  배경: 
    Linear-Gradient (RGBA (#000, .15), RGBA (#fff, .2)) 컨텐츠 박스, 
    Linear-Gradient (RGBA (#fff, .3), RGBA (#000, .3)) Border-Box, 
    CurrentColor;
  포인터 이벤트 : 자동;
  너비 : var (-d); 높이 : var (-d);
}

이 기술을 오래된 기사에서 자세히 설명했습니다. 새로 고침이 필요한 경우 확인하십시오!

그러나 위의 코드는 현재 검은 색 값이 검은 색 (#000)이라면 아무것도 가깝지 않습니다. 그것을 고치고 엄지 손가락의 커서를 더 적합한 것으로 바꾸겠습니다.

 입력 [type = 'range'] {
  / * 이전과 동일 */
  색상 : #eee;
  커서 : 횡령;
  
  & : Active {커서 : 잡음; }
}

결과는 이전보다 확실히 더 만족 스럽습니다.

Codepen의 Thebabydino (@thebabydino)의 펜을 참조하십시오.

실제로 나를 귀찮게하는 다른 것은 레이블 텍스트가 슬라이더에 얼마나 가까운 지입니다. 래퍼에 그리드 갭을 도입 하여이 문제를 해결할 수 있습니다.

 .포장하다 {
  / * 이전과 동일 */
  그리드 갭 : .625EM;
}

그러나 우리가 여전히 가지고있는 최악의 문제는 오른쪽 상단에 절대적으로 배치 된 출력입니다. 이것을 고치는 가장 좋은 방법은 그들에게 세 번째 그리드 행을 소개하고 엄지 손가락으로 움직이는 것입니다.

엄지 손가락의 위치는 채우기 마스크에 사용하는 그라디언트 레이어의 날카로운 정지와 유사한 방식으로 계산됩니다.

처음에, 우리는 출력의 왼쪽 가장자리를 수직선을 따라 썸 반지름 인 슬라이더의 왼쪽 가장자리에서 R을 멀리 떨어 뜨립니다. 이 수직선과 출력을 중간에 정렬하려면 X 축의 음의 방향으로 왼쪽으로 다시 번역하므로 너비의 절반 (50%, 변환 () 함수의 백분율 값이 변환이 적용되는 요소의 차원에 비해)를 반으로 변환합니다.

엄지 손가락으로 이동시키기 위해 해당 엄지 손가락 (--c)의 현재 값에서 최소값 (-min)을 빼고이 차이를 최대 값 (-max)과 최소값 (-min)의 차이 (--dif)로 나눕니다. 이것은 우리에게 [0, 1] 간격으로 진행 값을 제공합니다. 그런 다음이 값에 실제 동작 범위를 설명하는 유용한 너비 (-UW)를 곱합니다.

 .포장하다 {
  / * 이전과 동일 */
  그리드-템플릿 열 : Max-Content var (-H) 최대 컨텐츠;
}

출력 {
  배경 : CurrentColor;
  Border-Radius : 5px;
  색상 : 투명;
  그리드-컬럼 : 1;
  그리드 행 : 3;
  마진 왼쪽 : var (-r);
  패딩 : 0 .375EM;
  변환 : translate (calc ((-c)-var (-min))/var (-dif)*var (-uw) -50%);
  너비 : 최대 컨텐츠;
  
  &::후에 {
    색상 : #fff;
    내용 : 카운터 (c);
    카운터 리셋 : C var (-c);
  }
} 

Codepen의 Thebabydino (@thebabydino)의 펜을 참조하십시오.

이것은 첫눈에 훨씬 좋아 보인다. 그러나 면밀한 검사를 통해 우리는 여전히 많은 문제가 있음을 보여줍니다.

첫 번째는 오버플로입니다. 숨겨진 것은 트랙 끝에 도착할 때 약간의

요소를 잘라냅니다.

이것을 고치려면, 우리는 정확히 오버플로가 무엇을하는지 이해해야합니다. 아래의 대화식 데모에서 보여 지듯이 요소의 패딩 박스 외부의 모든 것을 잘라냅니다. 여기서 코드를 클릭하여 CSS 선언을 전환 할 수 있습니다.

Codepen의 Thebabydino (@thebabydino)의 펜을 참조하십시오.

이 문제에 대한 빠른 수정은 래퍼 .wrap에 충분한 측면 패딩을 추가하는 것입니다.

 패딩 : 0 2em;

우리는 여기서 멀티 덤프 슬라이더 스타일을 분리하고 있지만 실제로는 페이지에서 유일한 것이 아닐 수도 있습니다. 따라서 간격이 제한되면 측면 패딩이 음의 측면 마진으로 반전 될 수 있습니다.

근처의 요소에 여전히 기본값이있는 경우 정적 인 경우 정적, 우리가 래퍼를 상대적으로 배치 한 사실은 출력이 겹치는 것보다 위에 올라야합니다. 그렇지 않으면 .wrap에서 z-index를 조정해야합니다.

더 큰 문제는 우리가 사용한이 기술이 엄지 손가락을 드래그 할 때 정말 이상하게 보이는 겹침을 결과로 만들었다는 것입니다.

이 해당

에 초점을 맞출 때 z- 안수를 증가시킬 수있을뿐만 아니라

중첩의 특정 문제를 해결합니다.

 입력 [type = 'range'] {
  &:집중하다 {
    개요 : 고체 0 투명;
		
    &, & 출력 {
      색상 : Darkorange;
      z- 인덱스 : 2;
    }
  }
}

그러나 그것은 근본적인 문제에 대해 아무것도하지 않으며, 우리가 신체의 배경을 변경할 때, 특히 우리가 이미지를 변경하면

텍스트가 더 이상 숨길 수 없기 때문에 분명해집니다.

Codepen의 Thebabydino (@thebabydino)의 펜을 참조하십시오.

즉, 정상 상태에서

요소를 숨기는 방법과 다음과 같은 하이라이트 상태에서 드러내는 방법을 다시 생각해야합니다. 우리는 또한 우리의 CS를 팽팽하게하지 않고 이것을하고 싶습니다.

솔루션은 약 1 년 전에“CSS 변수를 사용한 건조 스위칭”기사에서 설명한 기술을 사용하는 것입니다. 우리는 또한 그 부정 (-nothl)을 계산합니다.

 * {
  -HL : 0;
  -NOTHL : calc (1- var (-hl));
  여백 : 0;
  글꼴 : 상속
}

그대로, 이것은 아직 아무것도하지 않습니다. 속임수는 우리가 두 상태 사이에서 변경하려는 모든 속성을 -HL에 의존하고 필요한 경우 부정 (코드> – nothl)에 의존하는 것입니다.

 $ HLC : #F90;

@mixin thumb () {
  / * 이전과 동일 */
  배경색 : $ HLC;
}

입력 [type = 'range'] {
  / * 이전과 동일 */
  필터 : 그레이 스케일 (var (-nothl));
  z- 인덱스 : calc (1 var (-hl));
  
  &:집중하다 {
    개요 : 고체 0 투명;
    
    &, & output {-hl : 1; }
  }
}

출력 {
  / * 동일한 그리드 배치 */
  마진 왼쪽 : var (-r);
  최대 width : Max-Content;
  transform : translate (calc ((-c)-var (-min))/var (-dif)*var (-uw));
	
  &::후에 {
    / * 이전과 동일 */
    배경: 
      Linear-Gradient (RGBA (#fff, .3), RGBA (#000, .3))
      $ HLC;
    Border-Radius : 5px;
    디스플레이 : 블록;
    패딩 : 0 .375EM;
    변환 : 번역 (-50%) 스케일 (var (-hl));
  }
} 

Codepen의 Thebabydino (@thebabydino)의 펜을 참조하십시오.

우리는 거의 거기에 있습니다! 상태 변경에 전환을 추가 할 수도 있습니다.

 $ t : .3S;

입력 [type = 'range'] {
  / * 이전과 동일 */
  전환 : 필터 $ T 편의성;
}

출력 :: 후 {
  / * 이전과 동일 */
  전환 : $ t 편의성 변환;
} 

Codepen의 Thebabydino (@thebabydino)의 펜을 참조하십시오.

최종 개선은 엄지 손가락 중 어느 것도 집중되지 않으면 채우기를 그레이 스케일 ()로 만드는 것입니다. 우리는 다음을 사용하여 다음을 수행 할 수 있습니다.

 .포장하다 {
  &::후에 {
    / * 이전과 동일 */
    필터 : 그레이 스케일 (var (-nothl));
    전환 : 필터 $ T 편의성;
  }
	
  & : 초점-within {-hl : 1; }
}

그리고 그게 다야!

Codepen의 Thebabydino (@thebabydino)의 펜을 참조하십시오.

옵션 #2 : 평평한 모습

우리가 평평한 디자인을 어떻게 얻을 수 있는지 봅시다. 예를 들어:

첫 번째 단계는 이전 데모를 제공하는 Box 그림자와 그라디언트를 제거하고 트랙 배경을 반복적 인 그라디언트로 만드는 것입니다. :

Codepen의 Thebabydino (@thebabydino)의 펜을 참조하십시오.

엄지 손가락의 크기 변화 : 초점은 하이라이트 스위치 변수 (-HL)에 의존하는 요인으로 스케일링 변환으로 제어 할 수 있습니다.

 @mixin thumb () {
  / * 이전과 동일 */
  변환 : scale (calc (1- .5*var (-nothl)));
  전환 : $ t 편의성 변환;
} 

Codepen의 Thebabydino (@thebabydino)의 펜을 참조하십시오.

그러나 엄지 손가락 주위의 구멍은 어떻습니까?

마스크 합성 기술은 여기에서 매우 유용합니다. 여기에는 방사형 그라디언트를 레이어링하여 모든 엄지 위치에서 디스크를 생성하는 것이 포함되며,이를 완료 한 후에는 디스크를 구멍으로 바꾸는 결과 (즉, 완전히 불투명 한 층으로 복합)를 반전시킵니다 (즉.

즉, 퍼그 코드를 약간 변경하여 각 엄지 손가락에 해당하는 디스크를 생성하는 방사형 구배 목록을 생성합니다. 차례로, 우리는 CSS의 것들을 뒤집 었습니다.

 //- 이전과 동일합니다
-tpos = thumbs.map ((c, i) =>`calc (var (-r) (var (-v $ {i})-var (-min))/var (-dif)*var (-uw)`);
- 채우십시오 = tpos.map (c =>`linear-gradient (90deg, red $ {c}, Transparent 0)`);
-Hole = tpos.map (c =>`Radial-Gradient ($ {c}, Red var (-r), Transparent 0)`)`)

.wrap (role = 'Group'aria-labelledby = 'multi-lbl' 
  style =`$ {humbs.map ((c, i) =>`--v $ {i} : $ {c.val}`) .join ( ';')}; 
    -Min : $ {min}; -max : $ {max};
    -fill : $ {fill.join ( ',')}; 
    -홀 : $ {hole.join ( ',')}`)
  // -전과 같은 래퍼 컨텐츠

이것은 다음과 같은 마크 업을 생성합니다.

 <div class="'랩'역할" : red calc at var>
  
</div>

CSS에서, 우리는 두 유사 요소에 마스크를 설정하고 각각에 대해 다른 값을 제공합니다. 우리는 또한 마스크 레이어를 xor합니다.

:: 이전의 경우, 마스크는 완전히 불투명 한 층이있는 방사형 그레이드 () 디스크 목록입니다 (디스크를 원형 구멍으로 바꾸는 인버터 역할을합니다). for :: 이후에는 채우기 linear-gradient () 레이어 목록입니다.

 .포장하다 {
  / * 이전과 동일 */
  
  & :: 이전, & :: 이후 {
    콘텐츠: '';
    / * 이전과 동일 */
    
    -마스크 : 선형 그레이드 (빨간색, 빨간색), var (-구멍);

    / * 비표준 WebKit 버전 */
    -webkit-mask : var (-마스크);
    -webkit-mask-composite : xor;

    / * Firefox에서 지원되는 표준 버전 */
    마스크 : var (-마스크);
    마스크 복합 : 제외;
  }
	
  &::후에 {
    배경 : #95A;
    -마스크 : var (-채우기);
  }
} 

Codepen의 Thebabydino (@thebabydino)의 펜을 참조하십시오.

마지막 단계는 트랙, 채우기 높이를 조정하고 중간을 그리드 셀 내에서 (엄지 손가락과 함께) 수직으로 정렬하는 것입니다.

 .포장하다 {
  / * 이전과 동일 */
  
  & :: 이전, & :: 이후 {
    / * 이전과 동일 */
    정렬-셀프 : 센터;
    높이 : 6px;
  }
}

우리는 이제 원하는 플랫 멀티 덤프 슬라이더를 가지고 있습니다!

Codepen의 Thebabydino (@thebabydino)의 펜을 참조하십시오.

위 내용은 멀티 룸 슬라이더 : 일반적인 경우의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!