滑块上的色块答案

【问题标题】：Color blocks on a slider滑块上的色块
【发布时间】：2020-10-06 07:22:09
【问题描述】：

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

请帮帮我，我只发现到处都是渐变。不好意思，我对 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>

【问题讨论】：

工作正常jsfiddle.net/lalji1051/k06xsn3z/4
查看带有“滑块”标签的图像，我需要色块而不是渐变

标签： html css twitter-bootstrap frontend

【解决方案1】：

如果您有两个相同的色标，您可以让一种纯色立即变为另一种纯色。

<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 20%, orange 40%, yellow 40%, yellow 60%, lightgreen 60%, lightgreen 80%, green 80%, green 100%);
outline: none;
border-radius: 50px;
"></div>

【讨论】：

【解决方案2】：

这应该会给你你所追求的色块：

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

例如here

【讨论】：