欢送关注我的公众号：前端侦探

对于原生 input range 滑动输入条如何自定义款式始终都是我心里的一道坎，个别状况下，能够很轻易的丑化到这个水平

为什么很容易呢？因为这些都是有对应的伪元素能够批改的

::-webkit-slider-container {  /*能够批改容器的若干款式*/}::-webkit-slider-runnable-track {  /*能够批改轨道的若干款式*/}::-webkit-slider-thumb {  /*能够批改滑块的若干款式*/}

可是，偏偏没有已滑过局部的款式，如果要定义上面这样的款式，单纯的 CSS 可能没方法实现了

留神：Firefox 有独自的伪类能够批改，本文探讨的是 Chrome 实现计划

一、我的实现思路

既然没有专门的伪元素能够批改已滑过局部的色彩，而且只有滑块是可动的，是不是能够在滑块上下手呢？

假如滑块右边有一个矩形，是追随滑块一起的，

当这个矩形足够长时，可能齐全笼罩右边的轨道，在可视范畴内，是不是就能够示意右边的已滑过局部了呢？示意如下（右边半透明示意滑动条之外）

尝试过伪元素的想法，像这样

::-webkit-slider-thumb::after{  /*本想绘制一个足够长的矩形*/}

惋惜，伪元素里并不能再次生成伪元素。

所以，如何在元素之外绘制一个矩形呢？

二、通过 border-image 在元素之外绘制图形

有哪些形式能够在元素之外绘制图形呢？想了一下，有 box-shadow 和 outline，然而如同并不适宜这种状况，咱们须要绘制的是一个尺寸可控的矩形，而这两种形式都不能很好地管制形态。那还有其余形式吗？

还真有！前两天刚看到张鑫旭老师的一篇文章：被低估的border-image属性，其中有一个个性就是在元素之外构建图像，并且不占据任何空间。连忙试试，这里绘制一个宽度为99vw的矩形（足够笼罩滑动条就行了），代码如下

::-webkit-slider-thumb {    -webkit-appearance: none;    appearance: none;    width: 20px;    height: 20px;    border-radius: 50%;    background-color: #f44336;    border: 1px solid transparent;    margin-top: -8px;    border-image: linear-gradient(#f44336,#f44336) 0 fill / 8 20 8 0 / 0 0 0 99vw; /*绘制元素外矩形*/}

成果如下

留神几点：

  1. border-image 要想失效，必须指定border，这里设置的是border: 1px solid transparent;
  2. 矩形是通过线性突变绘制的 linear-gradient(#f44336,#f44336)
  3. border-image 中8 20 8 0示意border-image-width，间隔上、右、下、左的间隔，因为滑块本身大小是 20 * 20，所以这个能够确定高度是 4 (20 - 8- 8)，地位是滑块本身的最右边（间隔左边是20）
  4. border-image 中 0 0 0 99vw示意 border-image-outset扩大大小，这里指的是向左扩大99vw的间隔

接下来通过overflow:hidden暗藏里面的局部就能够了

::-webkit-slider-container {    /*其余款式*/    overflow: hidden;}

残缺代码能够拜访：input range (codepen.io)

上面附上残缺代码（最近codepen貌似不太稳固）

[type="range"] {    -webkit-appearance: none;    appearance: none;    margin: 0;    outline: 0;    background-color: transparent;    width: 500px;}[type="range"]::-webkit-slider-runnable-track {    height: 4px;    background: #eee;}[type="range" i]::-webkit-slider-container {    height: 20px;    overflow: hidden;}[type="range"]::-webkit-slider-thumb {    -webkit-appearance: none;    appearance: none;    width: 20px;    height: 20px;    border-radius: 50%;    background-color: #f44336;    border: 1px solid transparent;    margin-top: -8px;    border-image: linear-gradient(#f44336,#f44336) 0 fill / 8 20 8 0 / 0px 0px 0 2000px;}

三、还是有一些局限

下面的实现老本其实是很低的，相比惯例的实现根底上，仅仅减少了1行用于绘制元素之外的矩形。

border-image: linear-gradient(#f44336,#f44336) 0 fill / 8 20 8 0 / 0px 0px 0 2000px;

然而，因为是通过超出暗藏的形式裁剪掉多出的局部，使得滑动条边缘是“一刀切”的，所以，如果要求滑动条带有圆角，这种实现形式就不行了

如果还有好的想法欢送留言探讨

四、简略总结一下

对于border-image-outset 这个属性，其实之前曾经在 MDN 上见识过了，但只是简略理解，还感觉很鸡肋，当初看来，这些属性不是没什么用，只是没有碰到适宜利用的场景。上面简略总结一下：

  1. 滑动条有 3 个伪元素能够自定义容器、轨道、滑块
  2. 伪元素里不能再嵌套伪元素了
  3. 元素之外绘制有 box-shadow、outline、border-image 3种办法
  4. border-image 能够应用任意格局图片，包含 CSS 突变
  5. 这个计划不能实现圆角

当然这些思路都只是“偏方”，像 Firefox 就齐全反对自定义款式了，惋惜桌面端还是 Chrome 的天下，只能缓缓期待一下 Chrome 前面的更新了。最初，如果感觉还不错，对你有帮忙的话，欢送点赞、珍藏、转发❤❤❤

欢送关注我的公众号：前端侦探