Фон состоящий из 2-х для input type=“range”

#javascript #html #css

Интересует вопрос, есть 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;
}






    

Ответы

Ответ 1

Пришлось переделать. В ::-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;
}