#html #css #twitter-bootstrap #frontend
#HTML #css #twitter-bootstrap #интерфейс
Вопрос:
Мне нужно, чтобы на моем слайдере были цветные блоки, как на изображении ниже:
Пожалуйста, помогите мне, я везде нашел только градиенты. Извините, я не очень разбираюсь в 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>
Комментарии:
1. работает нормально jsfiddle.net/lalji1051/k06xsn3z/4
2. Смотрите изображение с тегом ‘Slider’, мне нужны цветные блоки, а не градиент
Ответ №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%);
Пример здесь