多腳步滑塊：一般案例

這個兩部分系列的第一部分詳細介紹了我們如何獲得兩次跑步的滑塊。現在，我們將研究一個一般的多階段案例，但採用了一種不同，更好的技術來在拇指之間創建填充。最後，我們將深入研究造型的造型在現實的3D滑塊和扁平的造型背後。

文章系列：

1. 多腳步滑塊：特定的兩次案件
2. 多腳步滑塊：一般案例（此帖子）

更好，更靈活的方法

假設，在覆蓋與範圍輸入相同區域的包裝器偽元素上，我們從左到右的線性級別（）層堆疊與每個拇指相對應的層。每個梯度層都是完全不透明的（即alpha為1），從軌道最小到拇指的中線，然後完全透明（即alpha為0）。

請注意，RGB值無關緊要，因為我們關心的只是alpha值。我個人使用了代碼中的紅色（對於完全不透明的部分）和透明的關鍵字，因為它們的字符數量最少。

我們如何計算從完全不透明到完全透明的梯度停止位置？好吧，這些位置始終位於從左邊緣的拇指半徑之間，從右邊緣的拇指半徑之間，因此它們在等於有用寬度的範圍內（軌道寬度，減去拇指直徑）。

這意味著我們首先添加一個拇指半徑。然後，我們通過將當前拇指位置和最小值之間的差為最大值和最小值之間的差（ - dif）來計算進度。該進度值是[0，1]間隔中的一個數字 - 噹噹前的拇指位置處於最小值時，噹噹前的拇指位置處於滑塊最大值時，即0。為了確切地沿著有用的寬度間隔，我們將該進度值乘以有用的寬度。

我們所追求的位置是這兩個長度值之間的總和：拇指半徑和我們在有用的寬度間隔內走多遠。

下面的演示使我們能夠看到2D視圖中的所有外觀如何堆疊在一起，以及在父母的偽元素上的範圍輸入和梯度如何在3D視圖中分層。它也是交互式的，因此我們可以拖動滑塊拇指，並查看相應的填充（由梯度層在其父母的偽元素上創建）如何變化。

請參閱Codepen上的thebabydino（@TheBabydino）的筆。

該演示最好在Chrome和Firefox中觀看。

好吧，但是僅僅堆疊這些梯度層並不能為我們帶來我們追求的結果。

這裡的解決方案是使這些梯度掩蓋層，然後將其XOR（更確切地說，在CSS掩碼的情況下，這意味著將其Xor alphane Xor）。

如果您需要對XOR的工作方式進行複活，這裡有一個：給定的兩個輸入，如果輸入值不同（其中一個是1，另一個是0），則此操作的輸出為1，如果輸入值相同（它們兩個是0或兩個是1），則為1）

XOR操作的真實表看起來如下：

輸入		輸出
一個	b
0	0	0
0	1	1
1	0	1
1	1	0

您還可以在以下交互式演示中使用它，在此可以切換輸入值並查看輸出的變化：

請參閱Codepen上的thebabydino（@TheBabydino）的筆。

在我們的情況下，輸入值是沿水平軸的梯度掩模層的alpha。 XOR-ing多層意味著對前兩個從底部進行，然後從底部的第三層XOR-ing-thing the先前的XOR操作等等。對於我們的特定情況，即alpha的左右梯度等於1（由相應的拇指值決定），然後為0，它看起來如下所示（我們從底部開始並上升）：

如果兩層從底部的alpha為1，則我們在XOR-unging之後獲得的結果層的alpha為0。它們的alpha值不同，所得層的alpha為1。在它們的alpha中，它們的alpha均為0，結果層的Alpha為0。

向上移動，我們將第三層與上一步中獲得的結果層相關。這兩個層具有相同的alpha，第二個XOR操作產生的層的alpha為0。它們具有不同的alpha，所得的alpha為1。

同樣，我們從底部將第四層分為第四層，而第二階段XOR操作產生的層。

就CSS而言，這意味著使用標準蒙版複合材料的排除值和非標準-Webkit-mask-Composite的XOR值。 （為了更好地了解面具合併，請查看速成課程。）

這項技術為我們提供了所需的結果，同時還允許我們為所有填充物使用單個偽元素。這也是一種適合任何數量拇指的技術。讓我們看看如何將其放入代碼中！

為了使事情保持完全靈活，我們首先更改哈停與代碼，以便它可以添加或刪除拇指並通過簡單地添加或從拇指對像中添加或刪除項目，從而相應地更新所有內容，每個對像都包含一個值和標籤（僅適用於屏幕讀取器）：

 - 令最小= -50，max = 50;
 - 讓拇指= [
 -  {val：-15，lbl：'value a'}， 
 -  {val：20，lbl：'value b'}， 
 -  {val：-35，lbl：'value c'}， 
 -  {val：45，lbl：'value d'}
 - ];
 - 令nv = thumbs.length;

。 
      style =`$ {thumbs.map（（（c，i）=>`-v $ {i}：$ {c.val}`）.join（';'）}; 
              - 米：$ {min}; -max：$ {max}`）
  ＃多LBL多拇指滑塊：
     -  for（讓i = 0; i <nv i label.sr-inly .lbl min="min" value="thumbs" .val max="max）"><p>在這些精確四個值的特定情況下，生成的標記看起來如下：</p>
<pre rel="HTML"> <div class="'wrap'角色='組'aria-labelledby" v0>
  <div id="'多lbl'">多拇指滑塊：</div>
  <label class="'sr-inly'for">值a </label>
  <input type="'range'id">
   
  <label class="'sr-inly'for">值b </label>
  <input type="'range'id">
   
  <label class="'sr-inly'for">值c </label>
  <input type="'range'id">
   
  <label class="'sr-inly'for">值d </label>
  <input type="'range'id">
   
</div>

我們不需要在CSS或JavaScript中添加任何內容，就可以為我們提供一個功能性的滑塊，其中

值在拖放滑塊時會更新。但是，具有四個元素，而包裝器的網格仍然具有兩個列會破壞佈局。因此，目前，我們刪除了為元素引入的行，絕對將這些元素放置，並且僅在相應的集中時才能使它們可見。我們還刪除了在包裝器上使用兩個偽元素的先前解決方案的遺跡。

 。裹 {
  / *與以前相同 */
  網格 - 板板行：max-content＃{$ h}; / *現在只有2行 */

  ＆：：後 {
    背景：＃95A;
    // 內容： ''; //現在不顯示
    網格列：1/ span 2;
    網格行：3;
  }
}

輸入[type ='range'] {
  / *與以前相同 */
  網格行：2; / *最後一行是第二行 */
}

輸出 {
  顏色：透明；
  位置：絕對；
  右：0;
	
  ＆：：後 {
    內容：計數器（c）;
    計數器：C var（-c）;
  }
}

我們將採取更多措施以稍後的結果來效果，但是現在，這就是我們所擁有的：

請參閱Codepen上的thebabydino（@TheBabydino）的筆。

接下來，我們需要將那些拇指放到拇指填充物上。我們通過在哈巴狗中生成蒙版層並將其放入包裝器上的填充自定義屬性中來做到這一點。

 //  - 和以前一樣
 - 令layers = thumbs.map（（c，i）=>`線性級別（90DEG，red calc（var（-r）（var（-v $ {i}） -  var（-min））/var（-min））/var（-vir）*var（-uw）*var（-uw）），透明度0）`）;

。 
  style =`$ {thumbs.map（（（c，i）=>`-v $ {i}：$ {c.val}`）.join（';'）}; 
     - 米：$ {min}; -max：$ {max};
     - 填充：$ {layers.join（'，'）}`）
  //  - 和以前一樣

對於具有這些值的四個拇指的特定情況的生成的HTML可以在下面看到。請注意，如果我們從初始數組中添加或刪除項目，則會自動更改。

 <div class="'wrap'角色='組'aria-labelledby" v0 dif>
  <div id="'多lbl'">多拇指滑塊：</div>
  <label class="'sr-inly'for">值a </label>
  <input type="'range'id">
   
  <label class="'sr-inly'for">值b </label>
  <input type="'range'id">
   
  <label class="'sr-inly'for">值c </label>
  <input type="'range'id">
   
  <label class="'sr-inly'for">值d </label>
  <input type="'range'id">
   
</div>

請注意，這意味著我們需要將與尺寸相關的SASS變量轉換為CSS變量，並替換使用它們的屬性中的SASS變量：

 。裹 {
  / *與以前相同 */
  -w：20em;
  -H：4EM;
  -d：calc（.5*var（-h））;
  -r：calc（.5*var（-d））;
  -uw：calc（var（-w） -  var（-d））;
  背景：線性級別（0DEG，#CCC var（-h），透明0）;
  網格通信：max-content var（-h）/ var（-w）;
  寬度：var（-w）;
}

我們設置了包裝器的口罩oo ::偽元素之後：

 。裹 {
  / *與以前相同 */
  
  ＆：：後 {
    內容： '';
    背景：＃95A;
    網格列：1/ span 2;
    網格行：2;

    / *非標準WebKit版本 */
    -webkit mask：var（ - 填充）;
    -webkit面具複合材料：XOR;

    / *標準版本，在Firefox中支持 */
    蒙版：var（ - 填充）;
    面具複合材料：排除；
  }
}

現在，我們已經擁有了我們想要的東西，而對此技術的真正酷的事情是，更改拇指的數量所需要做的就是添加或刪除拇指對象（每個值和標籤，每個值）到Pug代碼中的拇指陣列 - 絕對沒有其他需要更改的東西！

請參閱Codepen上的thebabydino（@TheBabydino）的筆。

優惠的調整

到目前為止，我們所擁有的只是一個漂亮的景象。因此，讓我們開始解決這個問題！

選項＃1：逼真的外觀

假設我們想實現以下結果：

第一步是使軌道的高度與拇指相同，然後繞軌道末端。到目前為止，我們已經在.wrap元素上模仿了曲目。儘管在技術上可以通過使用分層的線性和徑向梯度來模擬具有圓形末端的軌道，但它確實不是最好的解決方案，尤其是當包裝器仍然具有免費的偽元素（前面的::）時。

 。裹 {
  / *與以前相同 */
  -h：2em;
  -d：var（-h）;
  
  ＆::之前，＆:: efter {
    Border-Radius：var（-r）;
    背景：#ccc;
    內容： '';
    網格列：1/ span 2;
    網格行：2;
  }
  
  ＆：：後 {
    背景：＃95A;

    / *非標準WebKit版本 */
    -webkit mask：var（ - 填充）;
    -webkit面具複合材料：XOR;

    / *標準版本，在Firefox中支持 */
    蒙版：var（ - 填充）;
    面具複合材料：排除；
  }
} 

請參閱Codepen上的thebabydino（@TheBabydino）的筆。

使用::在模擬軌道之前，它打開了略微3D外觀的可能性：

 <pre rel="“" scss> <code> .wrap {
  / *與以前相同 */
  
  ＆::之前，＆:: efter {
    / *與以前相同 */
    盒子陰影：插圖0 2PX 3PX RGBA（＃000，.3）;
  }
  
  ＆：：後 {
    / *與以前相同 */
    背景： 
      線性畢業生（RGBA（#FFF，.3），RGBA（＃000，.3））
      ＃95a;
  }
}</code>

我絕不是設計師，所以這些值可能可以調整以獲得更好的結果，但是我們已經可以看到一個區別：

請參閱Codepen上的thebabydino（@TheBabydino）的筆。

這給我們留下了一個非常醜陋的拇指，所以讓我們也要修復該部分！

我們利用具有不同背景折疊（和背景 - 原始）值的多個背景的技術。

 @mixin thumb（）{
  邊框：實心calc（.5*var（-r））透明；
  邊界拉迪烏斯：50％； / *製作圓形 */
  盒子大小：邊框框； / * Chrome＆Firefox之間的不同 */
  / *現在我們有一個非零邊框 */需要盒子大小 */
  背景： 
    線性級別（RGBA（＃000，.15），rgba（#fff，.2））content-box， 
    線性級別（RGBA（#FFF，.3），RGBA（＃000，.3））邊框框， 
    CurrentColor;
  指針盛會：自動；
  寬度：var（-d）;高度：var（-d）;
}

我在一篇較舊的文章中對此技術進行了很多詳細的描述。確保您是否需要復習！

但是，如果當前的彩色值為黑色（＃000），則上述代碼將幾乎一無所有。讓我們解決這個問題，還將拇指上的光標更改為更合適的東西：

輸入[type ='range'] {
  / *與以前相同 */
  顏色：#eee;
  光標：抓取；
  
  ＆：Active {光標：抓取; }
}

結果當然比以前更令人滿意：

請參閱Codepen上的thebabydino（@TheBabydino）的筆。

真正困擾我的其他事情是標籤文本與滑塊的距離有多近。我們可以通過在包裝器上引入網格差距來解決此問題：

 。裹 {
  / *與以前相同 */
  網格間隙：.625EM;
}

但是我們仍然遇到的最糟糕的問題是右上角絕對位置的輸出。解決此問題的最佳方法是為他們引入第三個網格行，並用大拇指移動它們。

拇指的位置的計算方式與我們用於填充面膜的梯度層的尖銳停止的方式相似。

最初，我們將輸出的左邊緣放在垂直線的左側邊緣，該線是一個拇指半徑-r遠離滑塊的左邊緣。為了將輸出與此垂直線對齊，我們將它們翻譯回去（向左，沿x軸的負方向，因此我們需要減去符號）的寬度的一半（50％，因為translate（）函數中的百分比值相對於元素的尺寸，將變換應用於元素的尺寸）。

為了用拇指移動它們，我們從相應的拇指（-c）的當前值中減去最小值（ - min），將此差異除以最大值（-max）和最小值（-min）之間的差（ - dif）。這為我們提供了[0，1]間隔的進度值。然後，我們將該值乘以有用的寬度（-UW），該值描述了實際運動範圍。

 。裹 {
  / *與以前相同 */
  網格 - 板行：最大var（-h）max-content;
}

輸出 {
  背景：CurrentColor；
  邊界拉迪烏斯：5px;
  顏色：透明；
  網格列：1;
  網格行：3;
  左鍵：var（-r）;
  填充：0 .375EM;
  變換：轉換（calc（（var（-c） -  var（-min））/var（ -  dif）*var（-uw）-50％））;
  寬度：Max-Content;
  
  ＆：：後 {
    顏色：#fff;
    內容：計數器（c）;
    計數器：C var（-c）;
  }
} 

請參閱Codepen上的thebabydino（@TheBabydino）的筆。

乍一看，這看起來好多了。但是，仔細檢查表明我們仍然有很多問題。

第一個是溢出：當我們到達軌道末端時，隱藏的元素會切出一點。

為了解決此問題，我們必須了解確切的溢出：隱藏的做法。如下面的交互式演示所示，它削減了元素填充框之外的所有內容，您可以單擊代碼以切換CSS聲明。

請參閱Codepen上的thebabydino（@TheBabydino）的筆。

這意味著解決此問題的快速解決方法是在包裝器.wrap上添加足夠大的側面填充。

填充：0 2em;

我們在這裡孤立地對我們的多次滑塊進行了設計，但實際上，這可能不會是頁面上唯一的東西，因此，如果間距有限，我們可以將其側向填充，並具有負側向邊緣。

如果附近的元素仍然具有默認位置：靜態，那麼我們相對定位包裝器的事實應該使輸出在其重疊之上的頂部，否則，對.wrap上的z索引進行調整。

更大的問題是，我們已經在拖動拇指時使用了一些非常奇怪的重疊的結果。

當集中在相應的上以及解決重疊的特定問題上時，增加z指數：

輸入[type ='range'] {
  ＆：重點 {
    輪廓：實心0透明；
		
    ＆， ＆ 輸出 {
      顏色：深色態；
      z索引：2;
    }
  }
}

但是，它對基本問題沒有任何作用，當我們更改身體背景時，這變得顯而易見，尤其是如果我們將其更改為圖像，因為這不允許文本不再隱藏在其中：

請參閱Codepen上的thebabydino（@TheBabydino）的筆。

這意味著我們需要重新思考如何將元素隱藏在正常狀態以及如何以突出顯示狀態（例如：focus）揭示它們。我們也想在不膨脹我們的CSS的情況下這樣做。

解決方案是使用我一年前在“使用CSS變量的干交換開關”中描述的技術：使用突出顯示 - HL自定義屬性，其中值在正常狀態下為0，在亮點狀態下為1（：focus）。我們還計算了其否定（-nothl）。

 * {
  -hl：0;
  -nothl：calc（1-var（-hl））;
  保證金：0;
  字體：繼承
}

實際上，這還沒有任何作用。訣竅是使我們想在兩個狀態之間更改的所有屬性取決於-HL，如有必要，其否定（代碼> –nothl）。

 $ HLC：＃f90;

@mixin thumb（）{
  / *與以前相同 */
  背景色：$ hlc;
}

輸入[type ='range'] {
  / *與以前相同 */
  過濾器：灰度（var（-nothl））;
  z index：calc（1 var（-hl））;
  
  ＆：重點 {
    輪廓：實心0透明；
    
    ＆＆＆output {-hl：1; }
  }
}

輸出 {
  / *相同的網格放置 */
  左鍵：var（-r）;
  最大寬度：最大包含；
  變換：轉換（calc（（var（ -  c） -  var（-min））/var（ -  dif）*var（-uw）））;
	
  ＆：：後 {
    / *與以前相同 */
    背景： 
      線性畢業生（RGBA（#FFF，.3），RGBA（＃000，.3））
      $ HLC;
    邊界拉迪烏斯：5px;
    顯示：塊;
    填充：0 .375EM;
    變換：轉換（-50％）比例（var（-hl））;
  }
} 

請參閱Codepen上的thebabydino（@TheBabydino）的筆。

我們快到了！我們還可以添加有關狀態變化的過渡：

 $ t：.3s;

輸入[type ='range'] {
  / *與以前相同 */
  過渡：過濾器$ t suble;
}

輸出:: efter {
  / *與以前相同 */
  過渡：變換$ t suble;
} 

請參閱Codepen上的thebabydino（@TheBabydino）的筆。

最終的改進將是灰度（）如果沒有一個拇指，則填充是填充。我們可以使用以下方式來做到這一點：焦點對我們的包裝器：

 。裹 {
  ＆：：後 {
    / *與以前相同 */
    過濾器：灰度（var（-nothl））;
    過渡：過濾器$ t suble;
  }
	
  ＆：focus-within {-hl：1; }
}

就是這樣！

請參閱Codepen上的thebabydino（@TheBabydino）的筆。

選項＃2：平坦的外觀

讓我們看看如何獲​​得平坦的設計。例如：

第一步是刪除框的陰影和梯度，使我們以前的演示具有3D外觀，並使軌道背景為重複梯度。

請參閱Codepen上的thebabydino（@TheBabydino）的筆。

拇指的大小變化：焦點可以通過縮放變換來控制，其因子取決於高光開關變量（-hl）。

 @mixin thumb（）{
  / *與以前相同 */
  變換：比例（calc（1-.5*var（-nothl）））;
  過渡：變換$ t suble;
} 

請參閱Codepen上的thebabydino（@TheBabydino）的筆。

但是，拇指周圍賽道上的孔呢？

蒙版合成技術在這裡非常有用。這涉及將徑向梯度分層以在每個拇指位置創建圓盤，並且在我們完成後，將其反轉（即與完全不透明的層合成），將這些圓盤變成孔的結果。

這意味著要更改哈巴索代碼，以便我們生成創建與每個拇指相對應的光盤的徑向梯度列表。反過來，我們將在CSS中反轉：

 //  - 和以前一樣
 - 令tpos = thumbs.map（（c，i）=>`calc（var（-r）（var（-v $ {i}）-var（-min））/var（-min））/var（-dif）*var（-uw））`;
 - 令fill = tpos.map（c =>`線性級別（90DEG，red $ {c}，透明0）`）;
 - 令hole = tpos.map（c =>`徑向級別（$ {c}，紅色var（-r），透明0）`）

。 
  style =`$ {thumbs.map（（（c，i）=>`-v $ {i}：$ {c.val}`）.join（';'）}; 
     - 米：$ {min}; -max：$ {max};
     - 填充：$ {fill.join（'，'）}; 
     - 孔：$ {hole.join（'，'）}`）
  //  - 像以前一樣的包裝器內容

這會生成以下標記：

 <div class="'wrap'角色='組'aria-labelledby" v0 dif>
  
</div>

在CSS中，我們在兩個偽元素上設置了一個掩碼，並為每個元素設置了不同的值。我們還XOR上的面具層。

在::之前的情況下，掩碼是帶有完全不透明層的Xor-eD discs Xor-eD列表（作為逆變器，可以將圓盤變成圓形孔）。對於::之後，這是填充線性級別（）層的列表。

 。裹 {
  / *與以前相同 */
  
  ＆::之前，＆:: efter {
    內容： '';
    / *與以前相同 */
    
     - 面具：線性級別（紅色，紅色），var（ - 孔）;

    / *非標準WebKit版本 */
    -webkit面具：var（-mask）;
    -webkit面具複合材料：XOR;

    / *標準版本，在Firefox中支持 */
    蒙版：var（-mask）;
    面具複合材料：排除；
  }
	
  ＆：：後 {
    背景：＃95A;
     - 面具：var（ - 填充）;
  }
} 

請參閱Codepen上的thebabydino（@TheBabydino）的筆。

最後一步是調整軌道，填充高度和中間，將它們垂直對齊在網格單元中（以及拇指）：

 。裹 {
  / *與以前相同 */
  
  ＆::之前，＆:: efter {
    / *與以前相同 */
    對齊：中心；
    身高：6px;
  }
}

現在，我們擁有所需的平坦多腳步滑塊！

請參閱Codepen上的thebabydino（@TheBabydino）的筆。

以上是多腳步滑塊：一般案例的詳細內容。更多資訊請關注PHP中文網其他相關文章！