Интересует вопрос, есть input type="range", и нужно его стилизовать так, чтобы получился тот, что на картинке. Я пробовал ставить разные градиенты, но в этом не силен и ничего не вышло. Может кто нибудь помочь?
<input type="range" class="game_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;
}
<input type="range" class="game_range">