CSS背景：重复线性渐变调整

我正在尝试调整一些css代码-重复线性渐变以精确

这是我目前的代码：

input[type="range"]::-moz-range-track {
  background: repeating-linear-gradient(to right, 
    #ccc, 
    #000 10%, 
    #ccc 1%, 
    #000 10%, 
    #ccc 10%, 
    #ccc 20%
);

以下是它的外观图片： 这就是我想做的：

如何才能做到这一点？

添加以下css：

input[type=“range”]：：-moz范围音轨{
背景：重复线性渐变（向右，
#ccc 9%，
#000 10%, 
#ccc 1%，
#000 10%, 
#ccc 10%，
#ccc 20%
)；

添加以下css：

input[type=“range”]：：-moz范围音轨{
背景：重复线性渐变（向右，
#ccc 9%，
#000 10%, 
#ccc 1%，
#000 10%, 
#ccc 10%，
#ccc 20%
)；

我已经测试过了

input[type="range"]::-moz-range-track {
  background: repeating-linear-gradient(to right, 
    #ccc 9%, 
    #000 10%, 
    #ccc 1%, 
    #000 5%, 
    #ccc 10%, 
    #ccc 28.5%
)
}

我已经测试过了

input[type="range"]::-moz-range-track {
  background: repeating-linear-gradient(to right, 
    #ccc 9%, 
    #000 10%, 
    #ccc 1%, 
    #000 5%, 
    #ccc 10%, 
    #ccc 28.5%
)
}