Интересует вопрос, есть input type="range", и нужно его стилизовать так, чтобы получился тот, что на картинке. Я пробовал ставить разные градиенты, но в этом не силен и ничего не вышло.
Может кто нибудь помочь?
input[type=range] {
background: -webkit-gradient(linear, left top, right top, color-stop(30%, #008000), color-stop(30%, #ffffff), color-stop(30%, #ffffff));
background: linear-gradient(left, #008000 30%, #ffffff 30%, #ff0000 30%);
background-size: 1% 100px;
}
.game_range {
width: 60%;
margin-top: 40px;
margin-bottom: 0px;
-webkit-appearance: none;
}
input {
outline: none;
border: none;
cursor: pointer;
}
input[type=range]::-webkit-slider-thumb {
;
-webkit-appearance: none;
border-radius: 50%;
background: #fff;
border-width: 2px;
border-style: solid;
border-image: linear-gradient( -175deg, rgb(116, 70, 232) 0%, rgb(15, 137, 248) 100%);
border-image-slice: 5;
width: 15px;
height: 15px;
}
Ответ
Пришлось переделать. В ::-webkit-slider-thumb вставил background вместо border-image, насколько мне известно — border-image не взаимодействует с border-radius, поэтому вставил SVG в background(изменить цвет градиента в SVG можно, меняя значение stop-color в linearGradient. Размер — width & height & viewBox атрибуты SVG, а также основные свойства ширины и высоты thumb). Белые полоски сделаны через псевдоэлемент.
for (input of document.querySelectorAll(".range")) {
active(input);
}
document.addEventListener("input", function(e) {
var input = e.target;
active(input);
});
function active(input) {
var min = input.getAttribute("min");
var max = input.getAttribute("max");
input.style.setProperty("--val", (input.value - min));
}
* {
margin: 0;
padding: 0;
}
html,
body {
height: 100%;
}
body {
display: flex;
justify-content: center;
align-items: center;
}
.range {
position: relative;
-webkit-appearance: none;
cursor: pointer;
width: 50%;
height: 10px;
}
.range::-webkit-slider-thumb {
position: relative;
-webkit-appearance: none;
background: url('data:image/svg+xml;utf8,');
width: 15px;
height: 15px;
margin-top: -2px;
z-index: 4;
}
.range::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: linear-gradient(to right, white 30%, transparent 30%);
background-size: 4px 100px;
z-index: 3;
}
.range::-webkit-slider-runnable-track {
height: 100%;
background: linear-gradient(to right, #ff0b34 calc(var(--val)*1%), #78d151 0);
}
.range::-ms-fill-lower {
background: #ff0b34;
}
.range::-ms-fill-upper {
background: #78d151;
}
