html - 滑块上的色块

Question

我的滑块上需要有色块，如下图所示：

滑块

请帮助我，我只发现到处都是渐变。对不起，我对 CSS 不太了解

这是我当前的代码：

<div style="width: 80%;height: 100px;background: #fff;display: flex;flex-flow: column;justify-content: center;align-items: center;"><input type="range" min="1" max="6" value="6" style="
width: 90%;
margin-top: 35px;
-webkit-appearance: none;
height: 12px;
background-image: linear-gradient(to right, red 20%, orange 40%, yellow 60%, lightgreen 80%, green 100%);
outline: none;
border-radius: 50px;
"></div>

标签： htmlcsstwitter-bootstrapfrontend

Answer 1

这应该为您提供您所追求的色块：

background-image: linear-gradient(to right, red 20%, orange 20%, orange 40%, yellow 40%, yellow 60%, lightgreen 60%, lightgreen 80%, green 80%, green 100%);

这里的例子