双向进度滑块
我们页面一般遇到的是单向的进度滑块，很少遇到双向的滑块。
双向滑块的场景有：左右声道的调节、明暗亮度的调节等，如头图所示。
我们利用 input range 可以实现进度的控制。那么双向可以巧用渐变的障眼法来实现。
主要思路：
如图所示，进度条背景分别为50%蓝色，50%黑色
background: linear-gradient(to left, #000 50%, #69f 50%);
进度条分别为50%黑色，50%蓝色。
background: linear-gradient(to right, #000 150px, #69f 150px); // 本例宽度为300px
注意，与背景不同的是，进度条的渐变不能写百分比，而是要写成具体的数值，也就是进度条的具体宽度/2。
当进度条的宽度小于50%的时候，会露出背景的渐变蓝色，看起来就是向左滑动。 当进度条的宽度大于50%的时候，就会盖住背景的渐变蓝色，露出进度条另一半的蓝色。
线上示例： codepen.io/jianxiujiuc…
