マルチサムスライダー：一般的なケース

この2部構成のシリーズの最初の部分では、2つの親指スライダーを取得する方法を詳しく説明しました。次に、一般的なマルチサムケースを見ますが、親指の間に塗りつぶしを作成するための別のより良いテクニックを備えています。そして最後に、現実的な3Dに見えるスライダーとフラットなスライダーのスタイリングの背後にあることに飛び込みます。

記事シリーズ：

1. マルチサムスライダー：特定の2つの親指ケース
2. マルチサムスライダー：一般的なケース（この投稿）

より良い、より柔軟なアプローチ

たとえば、範囲入力と同じ領域を覆うラッパーの擬似要素では、各親指に対応する左から右線形勾配（）層を積み重ねます。各勾配層は完全に不透明です（つまり、アルファは1です）。トラックの最小値から親指の中央線まで、その後は完全に透明です（つまり、アルファは0です）。

私たちが気にするのはアルファ値だけであるため、RGB値は重要ではないことに注意してください。私は個人的には、文字の量が少ないためにジョブを行うため、コード内の赤（完全に不透明な部分）と透明なキーワードを使用しています。

完全に不透明から完全に透明になる勾配停止位置をどのように計算しますか？まあ、これらの位置は常に左端からの親指半径と右端からの親指半径の間に位置するため、それらは有用な幅（トラック幅、親指の直径を除いて）に等しい範囲内にあります。

これは、最初に親指の半径を追加することを意味します。次に、現在の親指の位置と最小値の差を最大値と最小値の差（-dif）に分割することにより、進行を計算します。この進行値は[0、1]間隔の数です。これは、現在の親指の位置がスライダーの最小値にある場合は0、現在の親指の位置がスライダーの最大値にある場合。私たちがその有用な幅間隔に沿って正確に到達するために、この進行値に有用な幅を掛けます。

私たちが望んでいる位置は、これらの2つの長さの値の間の合計です。親指半径と、私たちが有用な幅間隔を越えてどれだけ離れているかです。

以下のデモを使用すると、2Dビューですべてがどのように積み重なっているか、そして親の擬似要素の範囲入力と勾配が3Dビューでどのように階層化されるかを確認できます。また、インタラクティブなので、スライダーの親指をドラッグして、対応する塗りつぶし（親の擬似要素の勾配層によって作成される）がどのように変化するかを確認できます。

CodepenのThebabydino（@thababydino）のペンを参照してください。

デモは、ChromeとFirefoxで最もよく表示されます。

申し分なく、これらの勾配層を積み重ねるだけでは、結果が得られません。

ここでの解決策は、これらの勾配をマスク層にしてからXORすることです（より正確には、CSSマスクの場合、これはアルファをXORすることを意味します）。

XORの動作を復習する必要がある場合、1つは次のとおりです。2つの入力が与えられた場合、この操作の出力は1の場合は1です（1つは1、もう1つは0）、入力値が同一である場合（両方が0または両方が1です）

XOR操作の真理テーブルは次のように見えます：

入力		出力
a	b
0	0	0
0	1	1
1	0	1
1	1	0

また、次のインタラクティブデモでプレイすることもできます。ここでは、入力値を切り替えて、出力がどのように変化するかを確認できます。

CodepenのThebabydino（@thababydino）のペンを参照してください。

この場合、入力値は、水平軸に沿った勾配マスク層のアルファです。 XOR-ing複数のレイヤーは、下から最初の2つでそうすることを意味し、その後、前のXOR操作などの結果で下から3番目をXor-ingします。 1に等しいアルファを持つ左から右への勾配の特定のケース（対応する親指値で決定されます）、そして0では、以下に示すように見えます（下から始めて、上に作業します）：

底から両方の層のアルファが1の場合、XOR-ing後に得られる層のアルファは0のアルファを持っています。これらのアルファ値は異なります。

上に移動すると、前のステップで得られた結果のレイヤーで3番目のレイヤーをXORします。これらのレイヤーの両方が同じアルファを持っている場合、この2番目のXOR操作から生じるレイヤーのアルファは0です。それらが異なるアルファを持つ場合、結果のアルファは1です。

同様に、第2段階のXOR操作から生じるレイヤーを使用して、下から4番目の層をXOR XORします。

CSSに関しては、これは標準マスクコンポジットの除外値と非標準のWebkit-Mask-CompositeのXOR値を使用することを意味します。 （マスクの合成をよりよく理解するために、クラッシュコースをご覧ください。）

この手法は、私たちが望む結果を正確に提供し、すべての塗りつぶしに単一の擬似要素を使用することもできます。また、多くの親指に合わせて機能するテクニックでもあります。コードに入れる方法を見てみましょう！

物事を完全に柔軟に保つために、パグコードを変更することから始めて、親指を追加または削除し、それに応じて他のすべてを更新できるようにします。

 -min = -50、max = 50;
-Tumbs = [
 -  {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 = `$ {thumbs.map（（c、i）=>` -v $ {i}：$ {c.val} `）.jein（ ';'）}; 
              -  min：$ {min}; -max：$ {max} `）
  ＃multi-lblマルチサムスライダー：
    -for（let i = 0; i <nv i label.sr-only .lbl input id="`v" min="min" value="thumbs" .val max="max）" output style="`" c v><p>これらの正確な4つの値の特定のケースでは、生成されたマークアップは次のように見えます。</p>
<pre rel="HTML"> <div class="'wrap'" role="'group'" aria-labelledby="'multi-lbl'" style="'-v0：-15;">
  <div id="'multi-lbl'">マルチサムスライダー：</div>
  <label class="'sr-only'" for="'v0'">値a </label>
  
  <output for="'v0'" style="'" c v0> </output>
  <label class="'sr-only'" for="'v1'">値b </label>
  
   
  <label class="'sr-only'" for="'v2'">値c </label>
  
  <output for="'v2'" style="'" c v2> </output>
  <label class="'sr-only'" for="'v3'">値d </label>
  
  <output for="'v3'" style="'" c v3> </output>
</div>

これについては、CSSやJavaScriptに何も追加して、スライダーをドラッグするときに値が更新される機能スライダーを提供する必要はありません。ただし、ラッパーのグリッドにはまだ2つの列がある間に4つの要素があると、レイアウトが破損します。したがって、今のところ、要素に導入された行を削除し、これらの要素を絶対に配置し、対応するが焦点を合わせている場合にのみ見えるようにします。また、ラッパーに両方の擬似要素を使用する以前のソリューションの遺物も削除します。

 。包む {
  / *以前と同じ */
  Grid-Template-rows：max-content＃{$ h}; / *今すぐ2列のみ */

  ＆：：後 {
    背景：＃95a;
    // コンテンツ： ''; //今のところ表示しないでください
    グリッドコラム：1/スパン2;
    グリッドロー：3;
  }
}

input [type = 'range'] {
  / *以前と同じ */
  グリッドロー：2; / *最後の行は今2行です */
}

出力{
  色：透明;
  位置：絶対;
  右：0;
	
  ＆：：後 {
    コンテンツ：カウンター（c）;
    カウンターリセット：C var（ -  c）;
  }
}

後で結果を軽視するためにもっとや​​りますが、今のところ、ここに私たちが持っているものがあります。

CodepenのThebabydino（@thababydino）のペンを参照してください。

次に、それらの親指を親指に充填する必要があります。これを行い、パグにマスクレイヤーを生成し、ラッパーの-Fillカスタムプロパティに入れます。

 //-以前と同じ
-let layers = thumbs.map（（c、i）=> `linear-gradient（90deg、red calc（var（ -  r）（var（ -  v $ {i}） -  var（ -  min））/var（ -  dif）*var（ -  uw）、透過0）`）;

.wrap（role = 'group' aria-labelledby = 'multi-lbl' 
  style = `$ {thumbs.map（（c、i）=>` -v $ {i}：$ {c.val} `）.jein（ ';'）}; 
     -  min：$ {min}; -max：$ {max};
     - フィル：$ {layers.join（ '、'）} `）
  //-以前と同じ

これらの値を備えた4つの親指の特定のケースの生成されたHTMLを以下に見ることができます。最初の配列からアイテムを追加または削除すると、これは自動的に変更されることに注意してください。

 <div class="'wrap'" role="'group'" aria-labelledby="'multi-lbl'" style="'-v0：-15;" red calc r v0 var min dif uw v1 v2 v3>
  <div id="'multi-lbl'">マルチサムスライダー：</div>
  <label class="'sr-only'" for="'v0'">値a </label>
  
  <output for="'v0'" style="'" c v0> </output>
  <label class="'sr-only'" for="'v1'">値b </label>
  
   
  <label class="'sr-only'" for="'v2'">値c </label>
  
  <output for="'v2'" style="'" c v2> </output>
  <label class="'sr-only'" for="'v3'">値d </label>
  
  <output for="'v3'" style="'" c v3> </output>
</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）;
  グリッドテンプレート：最大コンテンツvar（ -  h）/ var（ -  w）;
  幅：var（ -  w）;
}

ラッパー::擬似要素の後のマスクを設定します。

 。包む {
  / *以前と同じ */
  
  ＆：：後 {
    コンテンツ： '';
    背景：＃95a;
    グリッドコラム：1/スパン2;
    グリッドロー：2;

    / *標準以外のWebKitバージョン */
    -webkit-mask：var（ -  fill）;
    -webkit-mask-composite：xor;

    / * Firefoxでサポートされている標準バージョン */
    マスク：var（ -  fill）;
    マスクコンポジット：除外;
  }
}

今、私たちはまさに私たちが望むものを手に入れており、このテクニックの本当にクールなことは、親指の数を変更するために必要なことは、親指オブジェクト（それぞれの値とラベルを使用して）をパグコードの親指配列に追加または削除することです。

CodepenのThebabydino（@thababydino）のペンを参照してください。

きれいな微調整

私たちがこれまでに持っているのは、きれいな光景以外のものです。それでは、それを修正し始めましょう！

オプション＃1：現実的な外観

以下で結果を達成したいとしましょう。

最初のステップは、トラックを親指と同じ高さにし、トラックの端を丸くすることです。この時点まで、.wrap要素の背景でトラックをエミュレートしました。層状の線形勾配とラジアル勾配を使用して丸い端を持つトラックをエミュレートすることは技術的には可能ですが、特にラッパーがまだ自由な擬似要素を持っている場合、それは本当に最良の解決策ではありません（::前）。

 。包む {
  / *以前と同じ */
  -H：2EM;
  -d：var（ -  h）;
  
  ＆::前、＆::後{
    Border-Radius：var（ -  r）;
    背景：#ccc;
    コンテンツ： '';
    グリッドコラム：1/スパン2;
    グリッドロー：2;
  }
  
  ＆：：後 {
    背景：＃95a;

    / *標準以外のWebKitバージョン */
    -webkit-mask：var（ -  fill）;
    -webkit-mask-composite：xor;

    / * Firefoxでサポートされている標準バージョン */
    マスク：var（ -  fill）;
    マスクコンポジット：除外;
  }
} 

CodepenのThebabydino（@thababydino）のペンを参照してください。

::使用する前にトラックをエミュレートする前に、わずかに3Dの外観を取得する可能性が開きます。

 <pre rel="scss"> <code> .wrap {
  / *以前と同じ */
  
  ＆::前、＆::後{
    / *以前と同じ */
    Box-shadow：Inset 0 2PX 3PX RGBA（＃000、.3）;
  }
  
  ＆：：後 {
    / *以前と同じ */
    背景： 
      線形勾配（RGBA（#FFF、.3）、RGBA（＃000、.3））
      ＃95a;
  }
}</code>

私は決してデザイナーではないので、見た目が良くなるためにこれらの価値を微調整することができますが、すでに違いを見ることができます。

CodepenのThebabydino（@thababydino）のペンを参照してください。

これにより、本当に醜い親指が残されているので、その部分も修正しましょう！

バックグラウンドクリップ（および背景オリジン）値が異なる複数の背景を重ねる手法を利用します。

 @mixin thumb（）{
  境界線：ソリッドカルク（.5*var（ -  r））透過;
  ボーダーラジウス：50％; / *円形にする */
  ボックスサイズ：ボーダーボックス; / * Chrome＆Firefoxの間で異なる */
  / *ゼロ以外のボーダーがあるので、ボックスサイズが必要です */
  背景： 
    線形勾配（RGBA（＃000、.15）、RGBA（#FFF、.2））コンテンツボックス、 
    線形勾配（RGBA（#FFF、.3）、RGBA（＃000、.3））ボードボックス、 
    CurrentColor;
  Pointer-Events：Auto;
  幅：var（ -  d）;高さ：var（ -  d）;
}

この手法については、古い記事で詳細に説明しました。リフレッシャーが必要な場合は、必ずチェックしてください！

ただし、現在のコロア値が今のところにある場合、上記のコードは何もしません。それを修正し、親指のカーソルをもっとふさわしいものに変更しましょう。

 input [type = 'range'] {
  / *以前と同じ */
  色：#eee;
  カーソル：グラブ;
  
  ＆：Active {cursor：grabbing; }
}

結果は確かに以前よりも満足です：

CodepenのThebabydino（@thababydino）のペンを参照してください。

私を本当に邪魔する他の何かは、ラベルのテキストがスライダーにどれほど近いかということです。ラッパーにグリッドギャップを導入することで、これを修正できます。

 。包む {
  / *以前と同じ */
  グリッドギャップ：.625em;
}

しかし、私たちがまだ抱えている最悪の問題は、右上隅にある絶対に配置された出力です。これを修正する最良の方法は、彼らのために3番目のグリッド行を導入し、親指で動かすことです。

親指の位置は、塗りつぶしマスクに使用する勾配層の鋭い停止と同様の方法で計算されます。

最初は、スライダーの左端から離れた親指の半径である垂直線に沿って出力の左端を配置します。出力をこの垂直線に中央に並べるために、それらをx軸の負の方向に戻します。したがって、マイナス符号が必要なので）幅の半分（50％、翻訳（）関数の割合値は、変換が適用される要素の寸法に関連しています）。

親指でそれらを移動するために、対応する親指（ - c）の現在の値から最小値（-min）を差し引き、この差を最大値（-max）と最小値（ - min）の間の差（-dif）で除算します。これにより、[0、1]間隔の進行値が得られます。次に、この値に有用な幅（-UW）を掛けます。これは、実際の可動域を記述します。

 。包む {
  / *以前と同じ */
  グリッドテンプレート列：最大コンテンツvar（ -  h）max-content;
}

出力{
  背景：CurrentColor;
  ボーダーラジウス：5px;
  色：透明;
  Grid-Column：1;
  グリッドロー：3;
  マージン左：var（ -  r）;
  パディング：0 .375EM;
  変換：翻訳（calc（（var（ -  c） -  var（ -  min））/var（ -  dif）*var（ -  uw）-50％））;
  幅：最大含有;
  
  ＆：：後 {
    色：#fff;
    コンテンツ：カウンター（c）;
    カウンターリセット：C var（ -  c）;
  }
} 

CodepenのThebabydino（@thababydino）のペンを参照してください。

これは一見するとずっと良く見えます。ただし、詳細な検査により、まだ多くの問題があることが明らかになりました。

1つ目は、オーバーフロー：トラックエンドに到達すると、要素を少し切り取ります。

これを修正するためには、正確にあふれていることを理解する必要があります。以下のインタラクティブデモで示されているように、要素のパディングボックスの外側のすべてを切り取り、コードをクリックしてCSS宣言を切り替えることができます。

CodepenのThebabydino（@thababydino）のペンを参照してください。

これは、この問題の簡単な修正は、ラッパー.wrapに十分な大きさの横方向のパディングを追加することです。

パディング：0 2EM;

ここでは多目的スライダーを単独でスタイリングしていますが、実際には、おそらくページ上の唯一のものではないので、間隔が制限されている場合、負の横方向の縁でその横方向のパディングを反転させることができます。

近くの要素がまだデフォルトの位置を持っている場合、静的です。ラッパーが比較的配置されているという事実は、出力がオーバーラップの上に出るようにする必要があります。そうしないと、.wrapでz-indexを微調整する必要があります。

より大きな問題は、私たちが使用したこの手法は、親指をドラッグしたときにいくつかの本当に奇妙に見えるオーバーラップをもたらすことです。

が対応するに焦点を合わせている場合、z-indexを増やします。また、オーバーラップの特定の問題を解決します。

 input [type = 'range'] {
  ＆：集中 {
    アウトライン：ソリッド0透明。
		
    ＆、＆output {
      色：ダークレンジ;
      z-index：2;
    }
  }
}

ただし、根本的な問題に対しては何もしません。これは、身体の背景を変更すると明らかになります。特に画像1に変更すると、テキストがもう隠すことができなくなります。

CodepenのThebabydino（@thababydino）のペンを参照してください。

これは、通常の状態の要素をどのように非表示にし、フォーカスなどのハイライト状態でそれらを明らかにする方法を再考する必要があることを意味します。また、CSSを膨らませることなくこれを行いたいと考えています。

解決策は、私が約1年前に「CSS変数を使用したドライスイッチング」記事で説明した手法を使用することです。ハイライト - 通常の状態では値が0、ハイライト状態では1つのカスタムプロパティを使用します（：フォーカス）。また、その否定を計算します（-nothl）。

 * {
  -HL：0;
  -nothl：calc（1-var（ -  hl））;
  マージン：0;
  フォント：継承
}

現状では、これはまだ何もしません。秘trickは、2つの状態間で変更したいすべてのプロパティを作成することです。 -hl、および必要に応じてその否定（code> –nothl）に依存します。

 $ hlc：＃f90;

@mixin thumb（）{
  / *以前と同じ */
  バックグラウンドカラー：$ hlc;
}

input [type = 'range'] {
  / *以前と同じ */
  フィルター：grayscale（var（ -  nothl））;
  z-index：calc（1 var（ -  hl））;
  
  ＆：集中 {
    アウトライン：ソリッド0透明。
    
    ＆、＆output {--HL：1; }
  }
}

出力{
  / *同じグリッド配置 */
  マージン左：var（ -  r）;
  最大幅：Max-Content;
  変換：translate（calc（（var（ -  c） -  var（ -  min））/var（ -  dif）*var（ -  uw）））;
	
  ＆：：後 {
    / *以前と同じ */
    背景： 
      線形勾配（RGBA（#FFF、.3）、RGBA（＃000、.3））
      $ hlc;
    ボーダーラジウス：5px;
    表示：ブロック;
    パディング：0 .375EM;
    変換：翻訳（-50％）スケール（var（ -  hl））;
  }
} 

CodepenのThebabydino（@thababydino）のペンを参照してください。

私たちはもうすぐそこにいます！州の変更に移行を追加することもできます。

 $ t：.3s;

input [type = 'range'] {
  / *以前と同じ */
  遷移：フィルター$ T EASEOUT;
}

出力::後{
  / *以前と同じ */
  トランジション：$ T EASEESOUTを変換します。
} 

CodepenのThebabydino（@thababydino）のペンを参照してください。

最終的な改善点は、親指のいずれも焦点が合っていない場合、塗りつぶし（）の塗りつぶしです。これを使用することができます。

 。包む {
  ＆：：後 {
    / *以前と同じ */
    フィルター：grayscale（var（ -  nothl））;
    遷移：フィルター$ T EASEOUT;
  }
	
  ＆：Focus-Within {--HL：1; }
}

そしてそれだけです！

CodepenのThebabydino（@thababydino）のペンを参照してください。

オプション＃2：平らな外観

フラットなデザインを取得する方法を見てみましょう。例えば：

最初のステップは、以前のデモに3Dの外観を与え、トラックの背景を繰り返しグラデーションにするボックスシャドウとグラデーションを削除することです。

CodepenのThebabydino（@thababydino）のペンを参照してください。

親指のサイズの変化：フォーカスは、ハイライトスイッチ変数（-HL）に依存する係数を備えたスケーリング変換で制御できます。

 @mixin thumb（）{
  / *以前と同じ */
  変換：スケール（calc（1-.5*var（ -  nothl）））;
  トランジション：$ T EASEESOUTを変換します。
} 

CodepenのThebabydino（@thababydino）のペンを参照してください。

しかし、親指の周りのトラックの穴はどうでしょうか？

ここでは、マスク合成技術が非常に便利です。これには、すべての親指の位置でディスクを作成するためのラジアル勾配を重ねることが含まれ、それらを完了した後、その結果、それらのディスクを穴に変換する結果を反転させます（つまり、完全に不透明な層で構成します）。

これは、パグコードを少し変更して、各親指に対応するディスクを作成する放射状勾配のリストを生成することを意味します。次に、CSSのそれらを反転させます。

 //-以前と同じ
-tpos = thumbs.map（（c、i）=> `calc（var（ -  r）（var（ -  v $ {i}） -  var（ -  min））/var（ -  dif）*var（ -  uw））`） `）;
-fill = tpos.map（c => `linear-gradient（90deg、red $ {c}、透過0）`）;
-let hole = tpos.map（c => `radial-gradient（$ {c}の円、赤いvar（ -  r）、透過0）`）

.wrap（role = 'group' aria-labelledby = 'multi-lbl' 
  style = `$ {thumbs.map（（c、i）=>` -v $ {i}：$ {c.val} `）.jein（ ';'）}; 
     -  min：$ {min}; -max：$ {max};
     - フィル：$ {fill.join（ '、'）}; 
     - ホール：$ {hole.join（ '、'）} `）
  //  - 以前と同様にラッパーのコンテンツをサメ

これにより、次のマークアップが生成されます。

 <div class="'wrap'" role="'group'" aria-labelledby="'multi-lbl'" style="'-v0：-15;" red calc r v0 var min dif uw v1 v2 v3 atcal>
  
</div>

CSSでは、両方の擬似要素にマスクを設定し、それぞれに異なる値を与えます。また、マスクレイヤーをXorします。

::の場合、マスクは、完全に不透明な層（ディスクを円形の穴に変えるインバーターとして機能する）を備えたradial-gradient（）discs xor-edのリストです。 ::その後、それは塗りつぶし線形 - 勾配（）層のリストです。

 。包む {
  / *以前と同じ */
  
  ＆::前、＆::後{
    コンテンツ： '';
    / *以前と同じ */
    
     - マスク：線形勾配（赤、赤）、var（ - 穴）;

    / *標準以外のWebKitバージョン */
    -webkit-mask：var（ -  mask）;
    -webkit-mask-composite：xor;

    / * Firefoxでサポートされている標準バージョン */
    マスク：var（ - マスク）;
    マスクコンポジット：除外;
  }
	
  ＆：：後 {
    背景：＃95a;
     - マスク：var（ -  fill）;
  }
} 

CodepenのThebabydino（@thababydino）のペンを参照してください。

最後のステップは、トラックを調整し、高さを埋め、中央にグリッドセル内で（親指とともに）垂直に整列することです。

 。包む {
  / *以前と同じ */
  
  ＆::前、＆::後{
    / *以前と同じ */
    align-self：center;
    高さ：6px;
  }
}

これで、希望するフラットマルチサンプスライダーがあります！

CodepenのThebabydino（@thababydino）のペンを参照してください。

以上がマルチサムスライダー：一般的なケースの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。