多脚步滑块：特定的两次案件

几年前，当Lea Verou在上面写了一篇文章时，这是我第一次出现的概念。自那以来，可悲的是从规格中删除了多范围的滑块，但是与此同时发生的其他事情是CSS变得更好 - 我也是如此，所以我最近决定制作自己的2019年版本。

在这本两部分的文章中，我们将逐步介绍如何首先用两个拇指构建示例，然后确定其问题。我们将解决这些问题，首先是针对第二部分案件，在第二部分中为多指数案例提出了更好的解决方案。

请注意，拇指如何相互传递，我们可以有任何可能的顺序，在拇指之间进行填充，相应地调整。令人惊讶的是，整个事情将需要极少的JavaScript。

文章系列：

1. 多指数滑块：特定的两次案件（此帖子）
2. 多脚步滑块：一般案例

基本结构

我们需要包装器中的两个范围输入。它们都具有相同的最小值和最大值（这很重要，因为否则什么都无法正常工作），我们将其设置为包装器（-min和-max）上的自定义属性。我们还将其值设置为自定义属性（-a和-b）。

 - 让最小= -50，max = 50
 - 令A = -30，B = 20;

。
  输入＃a（type ='range'min = min value = a max = max）
  输入＃b（type ='range'min = min = min value = b max = max）

这会生成以下标记：

 <div class="'wrap'style" a>
  
  
</div>

可访问性注意事项

我们有两个范围输入，它们可能每个都有一个，但是我们希望我们的多次滑块具有单个标签。我们如何解决这个问题？我们可以使包装器A

，使用其

来描述整个多thumb滑块，并具有，仅在我们的每个范围输入中筛选读者才能看到。 （感谢Zoltan对这个很棒的建议。）

但是，如果我们想在包装器上有弹性或网格布局，该怎么办？这是我们可能想要的，因为唯一的其他选择是绝对定位，并且带有其自己的一系列问题。然后，我们遇到了一个铬问题，其中

不能是flex或网格容器。

为了解决这个问题，我们使用以下ARIA同等用品（我从Steve Faulkner的这篇文章中挑选出来）：

 - 让最小= -50，max = 50
 - 令A = -30，B = 20;

。
  ＃多LBL多拇指滑块：
  label.sr-inly（for ='a'）值a：
  输入＃a（type ='range'min = min value = a max = max）
  label.sr-inly（for ='b'）值b：
  输入＃b（type ='range'min = min = min value = b max = max）

生成的标记现在是：

 <div class="'wrap'角色='组'aria-labelledby" a>
  <div id="'多lbl'">多拇指滑块：</div>
  <label class="'sr-inly'for"> value a：</label>
  
  <label class="'sr-inly'for">值b：</label>
  
</div>

如果我们将ARIA标签或Aria-Labelled属性设置在元素上，我们还需要使其发挥作用。

基本样式

我们使包装器成为中间对准的网格，并带有两个行和一列。底部网格单元具有我们想要的滑块的尺寸，而顶部的尺寸与滑块的宽度相同，但可以根据组标签的内容调整其高度。

 $ W：20EM;
$ h：1em;

。裹 {
  显示：网格；
  网格 - 板行：最大包含$ h;
  保证金：1EM自动；
  宽度：$ W;
}

要在视觉上隐藏元素，我们绝对将它们定位并夹在一无所有：

 。裹 {
  //与以前一样
  溢出：隐藏； //如果<label>元素溢出
  位置：相对；
}

.sr folly {
  位置：绝对；
  剪辑路径：插图（50％）；
}</label>

有些人可能会对夹路支持的支持尖叫，例如如何使用它削减了牙粒边缘和互联网探险家，但在这种特殊情况下，这并不重要！我们将在很短的时间内了解到这一点的原因。

我们将滑块放在另一个上方的滑块中，将其放在底部网格单元格中：

输入[type ='range'] {
  网格列：1;
  网格行：2;
} 

请参阅Codepen上的thebabydino（@TheBabydino）的笔。

但是，我们已经注意到了一个问题：不仅顶部滑块轨道显示在底部的拇指上方，而且顶部滑块使我们甚至不可能使用鼠标或触摸单击并与底部的底部进行交互。

为了解决此问题，我们删除任何轨道背景和边界，并通过在包装器上设置背景来突出显示轨道区域。我们还设置了指针事件：实际元素上没有一个，然后将其恢复到其拇指上的自动。

 @mixin track（）{
  背景：无； / *摆脱Firefox轨道背景 */
  身高：100％；
  宽度：100％；
}

@mixin thumb（）{
  背景：CurrentColor；
  边界：无； / *摆脱Firefox拇指边框 */
  边界拉迪乌斯：0; / *摆脱Firefox Corner Founding */
  指针盛会：自动； / *捕获点击 */
  宽度：$ h;身高：$ h;
}

。裹 {
  / *与以前相同 */
  背景： / *带有包装器背景的曲目 * / 
    线性毕业生（0deg，#ccc $ h，透明0）;
}

输入[type ='range'] {
  ＆::  -  webkit-slider-runnable-track， 
  ＆::  -  webkit-slider-thumb，＆{-webkit-apperance：none; }
  
  / *与以前相同 */
  背景：无； / *摆脱白色铬背景 */
  颜色：＃000;
  字体：继承； / *修复了Chrome＆Firefox中的字体大小太小 */
  保证金：0;
  指针盛会：无； / *让点击通过 */
  
  ＆::  -  webkit-slider-runnable-track {@include track; }
  ＆::  -  moz-range-track {@include track; }
  
  ＆::  -  webkit-slider-thumb {@include thumb; }
  ＆::  -  moz-range-thumb {@include thumb; }
}

请注意，我们已经在输入本身以及轨道和拇指上设置了更多样式，以使支持点击的浏览器的外观一致，以使点击通过实际的输入元素及其轨道，同时允许它们在拇指上。这不包括pre-chromium Edge和IE，这就是为什么我们还没有包含-MS-前缀 - 无论如何在这些浏览器中都没有任何功能。这也是为什么我们可以使用剪贴路径隐藏元素的原因。

如果您想了解有关默认浏览器样式的更多信息，以了解在此处覆盖所需的内容，则可以查看本文，其中我深入了解范围输入（我还可以详细介绍在此处使用Mixins背后的推理）。

请参阅Codepen上的thebabydino（@TheBabydino）的笔。

好吧，我们现在有一些看起来有效的东西。但是，为了真正使其发挥作用，我们需要继续使用JavaScript！

功能

JavaScript非常简单。我们需要更新包装器上设置的自定义属性。 （对于实际的用例，它们在DOM中的设置更高，以便它们也由依赖于它们的样式的元素继承。）

 AddEventListener（'输入'，e => {
  令_t = e.target;
  _t.parentnode.style.setproperty（` -  $ {_ t.id}`，_t.value）
}， 错误的）; 

请参阅Codepen上的thebabydino（@TheBabydino）的笔。

但是，除非我们提出DevTools，以了解这两个自定义属性的值确实会在包装器的样式属性上发生变化。包装，否则这并不是很明显。因此，让我们对此做些事情！

显示值

我们可以做的事情使很明显的是，拖动拇指实际上会改变某些事情是显示当前值。为此，我们为每个输入使用输出元素：

 - 让最小= -50，max = 50
 - 令A = -30，B = 20;

。
  ＃多LBL多拇指滑块：
  label.sr-inly（for ='a'）值a：
  输入＃a（type ='range'min = min value = a max = max）
  输出（for ='a''style =' -  c：var（-a）'）
  label.sr-inly（for ='b'）值b：
  输入＃b（type ='range'min = min = min value = b max = max）
  输出（for ='b'style =' -  c：var（-b）'）

由此产生的HTML看起来如下：

 <div class="'wrap'角色='组'aria-labelledby" a>
  <div id="'多lbl'">多拇指滑块：</div>
  <label class="'sr-inly'for"> value a：</label>
  
   
  <label class="'sr-inly'for">值b：</label>
  
   
</div>

我们使用一个小柜台技巧显示在pseudo element之后的AN ::中的值：

输出 {
  ＆：：后 {
    计数器：C var（-c）;
    内容：计数器（c）;
  }
} 

请参阅Codepen上的thebabydino（@TheBabydino）的笔。

现在，当我们拖放滑块时，这些价值很明显，但是结果很难看，并且使包装纸的背景对齐变得混乱，所以让我们添加一些调整！我们可以绝对可以定位元素，但是就目前而言，我们只需在组标签和滑块之间挤压它们：

 。裹 {
  //与以前一样
  网格 - 板：重复（2，max-content）＃{$ h}/ 1fr 1fr;
}

[id ='Multi-lbl'] {网格列：1/ span 2}

输入[type ='range'] {
  //与以前一样
  网格列：1/ span 2;
  网格行：3;
}

输出 {
  网格行：2;
  
  ＆：last-child {text-align：对； }
  
  ＆：：后 {
    内容：' - 'attr（for）'：'counter（c）';'
    计数器：C var（-c）;
  }
}

更好！

请参阅Codepen上的thebabydino（@TheBabydino）的笔。

单独设置：Focus样式甚至给我们提供了看起来一半不好的东西，再加上我们可以查看我们当前正在修改的值。

输入[type ='range'] {
  / *与以前相同 */
  z索引：1;

  ＆：重点 {
    z索引：2;
    轮廓：点点1px CurrentColor；
    
    ＆＆＆output {color：darkOrange}
  }
} 

请参阅Codepen上的thebabydino（@TheBabydino）的笔。

我们现在需要的只是在拇指之间创建填充。

棘手的部分

我们可以在包装器上使用伪元素来重新创建填充物，我们将其放在底部的网格行中，我们还放置了范围输入。顾名思义，该伪元素是在输入之后出现的，但是它仍然会显示在它们下面，因为我们已经在它们上设置了正面的Z index值。请注意，设置z索引在输入上起作用（没有明确将其位置与静态不同），因为它们是网格孩子。

该伪元素的宽度应与较高输入值和较低输入值之间的差异成正比。这里的最大问题是他们相互通过，我们无法知道哪个具有更高的价值。

第一种方法

我关于如何解决此问题的第一个想法是通过一起使用宽度和最小宽度。为了更好地理解它的工作原理，请考虑我们有两个百分比的值-A和-B，我们希望使元素的宽度成为它们之间差异的绝对值。

两个值中的一个都可以是更大的值，因此我们选择一个示例-b更大，一个示例 - a更大：

 <div style="'" a>  </div>
<div style="'" a>  </div>

我们将宽度设置为第二个值（-b）减去第一个（-a）和最小宽度为第一个值（-a）减去第二个值（-b）。

 div {
  背景：＃f90;
  身高：4EM；
  最小宽度：calc（var（-a）-var（-b））;
  宽度：calc（var（-b）-var（-a））;
}

如果第二个值（-b）更大，则宽度为正（使其有效）和最小宽度为负（这使其无效）。这意味着计算值是通过宽度属性的集合。在第一个示例中就是这种情况，其中-b为70％，-a为50％。这意味着宽度计算为70％-50％= 20％，而最小宽度计算为50％-70％= -20％。

如果第一个值更大，则宽度为负（使其无效），而最小宽度为正（这使其有效），这意味着计算值是通过最小宽度属性设置的值。在第二个示例中就是这种情况，其中-a为80％，-b为30％，这意味着宽度计算为30％-80％= -50％，而最小宽度计算为80％-30％= 50％。

请参阅Codepen上的thebabydino（@TheBabydino）的笔。

将此解决方案应用于我们的两个拇指滑块，我们有：

 。裹 {
  / *与以前相同 */
  -dif：calc（var（-max）-var（-min））;
  
  ＆：：后 {
    内容： '';
    背景：＃95A;
    网格列：1/ span 2;
    网格行：3;
    最小宽度：calc（（var（-a）-var（-b））/var（ -  dif）*100％）;
    宽度：calc（（var（-b） -  var（-a））/var（ -  dif）*100％）;
  }
}

为了将宽度和最小宽度值表示为百分比，我们需要将两个值之间的差除以范围输入的最大值和最小值之间的差（ - dif），然后将结果乘以100％。

请参阅Codepen上的thebabydino（@TheBabydino）的笔。

到目前为止，太好了……那呢？

::之后始终具有正确计算的宽度，但是我们还需要将其从轨道最小值中偏移，而较小的值，我们不能为其边缘左侧属性使用相同的技巧。

我在这里的第一个本能是使用左，但是实际的偏移并不能独自工作。我们还必须明确设置位置：伪元素之后的::相对的位置才能使其正常工作。我对这样做有点有些，所以我选择了左翼。

问题是我们可以采用哪种方法来采用第二个属性。我们用于宽度的一个不起作用，因为没有最小左右左侧的东西。

CSS规格中现在有一个Min（）函数，但是在我编码这些多次滑块的时候，它仅由Safari实施（此后还降落在Chrome中）。只有Safari的支持不会为我削减它，因为我没有任何Apple设备，也不会认识现实生活中的任何人……所以我无法使用此功能！而且无法提出我可以实际测试的解决方案意味着必须改变方法。

第二种方法

这涉及使用我们的两个包装器的（.wrap）伪元素：一个伪元素的边距左侧和宽度被设置好，好像第二个值更大，而另一个值的集合好像第一个值更大。

使用此技术，如果第二个值更大，则我们要设置在::之前的宽度为正，并且我们要设置的:: Awar是负的（这意味着它是无效的，并且应用了0的默认值，则隐藏了此伪元素）。同时，如果第一个值更大，则我们在之前设置的宽度是负面的（因此，正是该伪元素的计算宽度为0且在这种情况下未显示为0），而我们将其设置为：at之后的一个为正。

同样，我们使用第一个值（-a）设置::之前的左左属性，因为我们假设第二个值-B为此伪元素更大。这意味着-a是左端的值，-b右端的值。

对于::之后，我们使用第二个值（-b）设置了边距 - 左属性，因为我们假设第一个值 - a较大该伪元素。这意味着-b是左端的值，也是右端的值。

让我们看看如何将其放入代码中，以与以前有两个示例相同的示例，一个示例 - b更大，另一个地方 - a更大：

 <div style="'" a> </div>
<div style="'" a> </div>

 div {
  ＆::之前，＆:: efter {
    内容： '';
    身高：5em;
  }
  
  ＆：：前 {
    左键：var（-a）;
    宽度：calc（var（-b）-var（-a））;
  }

  ＆：：后 {
    左键：var（-b）;
    宽度：calc（var（-a）-var（-b））;
  }
} 

请参阅Codepen上的thebabydino（@TheBabydino）的笔。

将此技术应用于我们的两个拇指滑块，我们有：

 。裹 {
  / *与以前相同 */
  -dif：calc（var（-max）-var（-min））;
  
  ＆::之前，＆:: efter {
    网格列：1/ span 2;
    网格行：3;
    身高：100％；
    背景：＃95A;
    内容： ''
  }
  
  ＆：：前 {
    边距左：calc（（（var（-a） -  var（-min））/var（ -  dif）*100％）;
    宽度：calc（（var（-b） -  var（-a））/var（ -  dif）*100％）
  }
  
  ＆：：后 {
    左键：calc（（（var（-b） -  var（-min））/var（ -  dif）*100％）;
    宽度：calc（（var（-a）-var（-b））/var（ -  dif）*100％）
  }
} 

请参阅Codepen上的thebabydino（@TheBabydino）的笔。

现在，我们有一个具有两个拇指的功能性滑块。但是这个解决方案远非完美。

问题

第一个问题是，我们没有得到那些左翼和宽度值的正确正确。由于拇指造型（例如其形状，相对于轨道的尺寸以及完全不透明），因此在此演示中并不明显。

但是，假设我们的拇指是圆形的，甚至比轨道高度还小：

请参阅Codepen上的thebabydino（@TheBabydino）的笔。

现在，我们可以看到问题是什么：填充的最终线与拇指的垂直中线不一致。

这是因为移动拇指端到端的方式。在Chrome中，拇指的边框盒移动在轨道内容框的范围内，而在Firefox中，它在滑块的内容框的范围内移动。这可以在下面的录音中看到，填充物是透明的，而内容框和边框是半透明的。我们已经将橙色用于实际滑块，红色用于轨道，并为拇指紫色。

请注意，曲线中的曲目宽度始终取决于父滑块的宽度 - 我们可能在轨道本身上设置的任何宽度值都将被忽略。在Firefox中，情况并非如此，在Firefox中，轨道也可以比其父更宽或更窄。正如我们在下面看到的那样，这更清楚地表明，拇指的运动范围仅取决于该浏览器中的滑块宽度。

在我们的特殊情况下（公平地说，在许多其他情况下），我们可以摆脱赛道上没有任何余量，边框或填充。这意味着其内容框与实际范围输入的内容相吻合，因此浏览器之间没有矛盾之处。

但是，我们需要记住的是，拇指的垂直中间线（我们需要与填充端点一致）在一半的拇指宽度（如果有圆形拇指的拇指开始）之间移动，从轨道的开始和一半的拇指宽度远离轨道的末端。这是一个等于轨道宽度的间隔，减去拇指宽度（或圆形拇指的拇指直径）。

可以在下面的交互式演示中看到这一点，在该演示中，可以将拇指拖动以更好地查看其垂直中线的间隔（我们需要与填充的终点一致）移动。

请参阅Codepen上的thebabydino（@TheBabydino）的笔。

该演示最好在Chrome和Firefox中观看。

填充宽度和边缘左值不是相对于100％（或轨道宽度），而是轨道宽度减去拇指宽度（在特定情况下，这也是圆形拇指的直径）。同样，边缘左值的值不是从0开始，而是从一半的拇指宽度开始（在我们的特定情况下，这是拇指半径）。

 $ d：.5*$ h; //拇指直径
$ r：.5*$ d; //拇指半径
$ UW：$ W -$ d; //有用的宽度

。裹 {
  / *与以前相同 */
  -dif：calc（var（-max）-var（-min））;
	
  ＆：：前 {
    边距左：calc（＃{$ r}（var（-a） -  var（-min））/var（ -  dif）*＃{$ uw}）;
    宽度：calc（（var（ -  b） -  var（-a））/var（ -  dif）*＃{$ uw}）;
  }
  
  ＆：：后 {
    边距左：calc（＃{$ r}（var（-b） -  var（-min））/var（ -  dif）*＃{$ uw}）;
    宽度：calc（（var（-a）-var（-b））/var（ -  dif）*＃{$ uw}）;
  }
}

现在，填充沿两个大拇指的中线开始和结束应有的位置：

请参阅Codepen上的thebabydino（@TheBabydino）的笔。

这个问题已经解决了，但是我们仍然有一个更大的问题。假设我们想拥有更多的拇指，说四：

现在，我们有四个可以互相传递的大拇指，它们可以按照我们无法了解的任何顺序。此外，我们只有两个伪元素，因此我们不能应用相同的技术。我们还能找到仅CSS的解决方案吗？

好吧，答案是肯定的！但这意味着要取消此解决方案，并寻求不同的东西，更聪明 - 在本文的第二部分中！

文章系列：

1. 多指数滑块：特定的两次案件（此帖子）
2. 多脚步滑块：一般案例（明天来！）

以上是多脚步滑块：特定的两次案件的详细内容。更多信息请关注PHP中文网其他相关文章！