5

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

То что должно получится в итоге

2

1 ответ 1

3

Пришлось переделать. В ::-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,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 230 230" width="100%" height="100%" preserveAspectRatio="none"><defs><linearGradient id="grad"><stop offset="0%" stop-color="#0f89f8" /><stop offset="100%" stop-color="#7446e8" /></linearGradient></defs><ellipse ry="100" rx="100" cy="111" cx="111" style="fill:white;stroke:url(#grad);stroke-width:30;" /></svg>');
  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;
}
<input type="range" min="0" max="100" step="1" class="range">

5
  • Ого, спасибо вам! 25 июн 2018 в 11:36
  • @ЛебедевАртем, всегда пожалуйста=)
    – Arthur
    25 июн 2018 в 11:37
  • @Arthur ты хоть скриншот покажи - что ты там сделал - а то не могу пока смотреть в -webkit-
    – user33274
    25 июн 2018 в 12:13
  • @МаксимЛенский, могу гифку закинуть в SVG_chat
    – Arthur
    25 июн 2018 в 12:23
  • @Arthur lавай -я туда зайду
    – user33274
    25 июн 2018 в 12:24

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.