1

.vid_wrp--range[type=range] {
  -webkit-appearance: none;
  width: 100%;
  margin: 6.95px 0;
}
.vid_wrp--range[type=range]:focus {
  outline: none;
}
.vid_wrp--range[type=range]::-webkit-slider-runnable-track {
  width: 100%;
  height: 7.1px;
  cursor: pointer;
  background: linear-gradient(45deg, #00f742, #fb8600);
  border-radius: 25px;
  border: 0.2px solid #010101;
}
.vid_wrp--range[type=range]::-webkit-slider-thumb {
  border: 1px solid #bfbfbf;
  height: 21px;
  width: 21px;
  border-radius: 26px;
  background: #ffffff;
  cursor: pointer;
  -webkit-appearance: none;
  margin-top: -7.15px;
}
.vid_wrp--range[type=range]:focus::-webkit-slider-runnable-track {
  background: linear-gradient(45deg, #00f742, #fb8600);
}
.vid_wrp--range[type=range]::-moz-range-track {
  width: 100%;
  height: 7.1px;
  cursor: pointer;
  background: linear-gradient(45deg, #00f742, #fb8600);
  border-radius: 25px;
  border: 0;
}
.vid_wrp--range[type=range]::-moz-range-thumb {
  border: 1px solid #bfbfbf;
  height: 21px;
  width: 21px;
  border-radius: 26px;
  background: #ffffff;
  cursor: pointer;
}
.vid_wrp--range[type=range]::-ms-track {
  width: 100%;
  height: 7.1px;
  cursor: pointer;
  background: transparent;
  border-color: transparent;
  color: transparent;
}
.vid_wrp--range[type=range]::-ms-fill-lower {
  background: linear-gradient(45deg, #00f742, #fb8600);
  border: 0.2px solid #010101;
  border-radius: 50px;
  box-shadow: 0px 0px 0px #000000;
}
.vid_wrp--range[type=range]::-ms-fill-upper {
  background: linear-gradient(45deg, #00f742, #fb8600);
  border: 0.2px solid #010101;
  border-radius: 50px;
  box-shadow: 0px 0px 0px #000000;
}
.vid_wrp--range[type=range]::-ms-thumb {
  box-shadow: 0px 0px 0px rgba(0, 0, 0, 0);
  border: 1px solid #bfbfbf;
  height: 21px;
  width: 21px;
  border-radius: 26px;
  background: #ffffff;
  cursor: pointer;
  height: 7.1px;
}
.vid_wrp--range[type=range]:focus::-ms-fill-lower {
  background: linear-gradient(45deg, #00f742, #fb8600);
}
.vid_wrp--range[type=range]:focus::-ms-fill-upper {
  background: linear-gradient(45deg, #00f742, #fb8600);
}
<input type="range" class="vid_wrp--range" min="3" max="200" value="20;">

Вот такую штуку надо прекрутить. И весь прикол в том что бы она двигалась с ползунком. Можно даже на jquery)

Вот такую штуку надо прекрутить.

5
  • Используйте готовые плагины по типу ionden.com/a/plugins/ion.rangeSlider
    – user298256
    17 июл 2019 в 12:21
  • @Vearo вот это помощь. А я прям не додумался до этого)
    – makcim512
    17 июл 2019 в 12:30
  • 1
    Сарказм? Если под помощью вы имели ввиду чтобы вам написали готовый код, вы пришли не туда.
    – user298256
    17 июл 2019 в 12:34
  • @Vearo Я такой же участник проекта как и вы, и я пишу код. Вот человек которого я отметил, не поленился помочь) А советы типа используйте плагин, бесполезны. Если бы я хотел использовать плагины, я бы так и сделал.
    – makcim512
    17 июл 2019 в 13:37
  • в IE11 вообще жесть - красиво выглядит мой пример 18 июл 2019 в 2:48

2 ответа 2

4

Можно сделать как-то так, только это не кросс браузерно(псевдоэлементы у инпута работают только в хроме):

function upd(input) {
   let rect = input.getBoundingClientRect();
   input.setAttribute('data-content', input.value);
   // 21 - размер таскалки
   let x =(input.value - input.min)/(input.max - input.min)*(rect.width - 21); 
   input.style.setProperty('--x', x + 'px'); 
}

document.querySelectorAll('input[type=range]').forEach(function(input) {
  input.addEventListener('mousemove', upd.bind(0, input));
  addEventListener('resize', upd.bind(0, input));
  upd(input);
});
/** для работы скрипта нужно только это **/
input[type=range]:before {
  content: attr(data-content);
  transform: translate(calc(var(--x) - 10px), -40px);
  position: absolute;
  padding: 5px;
  box-shadow: 0px 0px 1px 1px rgba(0,0,0,0.1);
  width: 30px;
  text-align:center;
}
/** далее идут Ваши оригинальные стили **/
.vid_wrp--range[type=range] {
  -webkit-appearance: none;
  width: 100%;
  margin: 6.95px 0;
  padding-top:50px; /** за исключением одного этого свойства **/
}
.vid_wrp--range[type=range]:focus {
  outline: none;
}
.vid_wrp--range[type=range]::-webkit-slider-runnable-track {
  width: 100%;
  height: 7.1px;
  cursor: pointer;
  background: linear-gradient(45deg, #00f742, #fb8600);
  border-radius: 25px;
  border: 0.2px solid #010101;
}
.vid_wrp--range[type=range]::-webkit-slider-thumb {
  border: 1px solid #bfbfbf;
  height: 21px;
  width: 21px;
  border-radius: 26px;
  background: #ffffff;
  cursor: pointer;
  -webkit-appearance: none;
  margin-top: -7.15px;
}
.vid_wrp--range[type=range]:focus::-webkit-slider-runnable-track {
  background: linear-gradient(45deg, #00f742, #fb8600);
}
.vid_wrp--range[type=range]::-moz-range-track {
  width: 100%;
  height: 7.1px;
  cursor: pointer;
  background: linear-gradient(45deg, #00f742, #fb8600);
  border-radius: 25px;
  border: 0;
}
.vid_wrp--range[type=range]::-moz-range-thumb {
  border: 1px solid #bfbfbf;
  height: 21px;
  width: 21px;
  border-radius: 26px;
  background: #ffffff;
  cursor: pointer;
}
.vid_wrp--range[type=range]::-ms-track {
  width: 100%;
  height: 7.1px;
  cursor: pointer;
  background: transparent;
  border-color: transparent;
  color: transparent;
}
.vid_wrp--range[type=range]::-ms-fill-lower {
  background: linear-gradient(45deg, #00f742, #fb8600);
  border: 0.2px solid #010101;
  border-radius: 50px;
  box-shadow: 0px 0px 0px #000000;
}
.vid_wrp--range[type=range]::-ms-fill-upper {
  background: linear-gradient(45deg, #00f742, #fb8600);
  border: 0.2px solid #010101;
  border-radius: 50px;
  box-shadow: 0px 0px 0px #000000;
}
.vid_wrp--range[type=range]::-ms-thumb {
  box-shadow: 0px 0px 0px rgba(0, 0, 0, 0);
  border: 1px solid #bfbfbf;
  height: 21px;
  width: 21px;
  border-radius: 26px;
  background: #ffffff;
  cursor: pointer;
  height: 7.1px;
}
.vid_wrp--range[type=range]:focus::-ms-fill-lower {
  background: linear-gradient(45deg, #00f742, #fb8600);
}
.vid_wrp--range[type=range]:focus::-ms-fill-upper {
  background: linear-gradient(45deg, #00f742, #fb8600);
}
<input type="range" class="vid_wrp--range" min="3" max="200" value="20">
<input type="range" class="vid_wrp--range" min="3" max="200" value="40">


Кросс браузерно (с созданием доп элементов):

function upd(input, cloud) {
   let rect = input.getBoundingClientRect();
   cloud.textContent = input.value;
   // 21 - размер таскалки, 5.5 = (30-21)/2 где 30 ширина облачка
   let x =(input.value - input.min)/(input.max - input.min)*(rect.width - 21)-5.5; 
   cloud.style.transform = 'translate(' + x + 'px, -3px)'; 
}

document.querySelectorAll('input[type=range]').forEach(function(input) {
  let cloud = document.createElement('div');
  cloud.classList.add('cloud')
  input.parentNode.insertBefore(cloud, input);
  input.addEventListener('mousemove', upd.bind(0, input, cloud));
  addEventListener('resize', upd.bind(0, input, cloud));
  upd(input, cloud);
});
.cloud {
  margin-top: 5px;
  box-shadow: 0px 0px 1px 1px rgba(0,0,0,0.1);
  width: 30px;
  text-align:center;
  display:inline-block;
}
.vid_wrp--range[type=range] {
  -webkit-appearance: none;
  width: 100%;
  margin: 6.95px 0;
}
.vid_wrp--range[type=range]:focus {
  outline: none;
}
.vid_wrp--range[type=range]::-webkit-slider-runnable-track {
  width: 100%;
  height: 7.1px;
  cursor: pointer;
  background: linear-gradient(45deg, #00f742, #fb8600);
  border-radius: 25px;
  border: 0.2px solid #010101;
}
.vid_wrp--range[type=range]::-webkit-slider-thumb {
  border: 1px solid #bfbfbf;
  height: 21px;
  width: 21px;
  border-radius: 26px;
  background: #ffffff;
  cursor: pointer;
  -webkit-appearance: none;
  margin-top: -7.15px;
}
.vid_wrp--range[type=range]:focus::-webkit-slider-runnable-track {
  background: linear-gradient(45deg, #00f742, #fb8600);
}
.vid_wrp--range[type=range]::-moz-range-track {
  width: 100%;
  height: 7.1px;
  cursor: pointer;
  background: linear-gradient(45deg, #00f742, #fb8600);
  border-radius: 25px;
  border: 0;
}
.vid_wrp--range[type=range]::-moz-range-thumb {
  border: 1px solid #bfbfbf;
  height: 21px;
  width: 21px;
  border-radius: 26px;
  background: #ffffff;
  cursor: pointer;
}
.vid_wrp--range[type=range]::-ms-track {
  width: 100%;
  height: 7.1px;
  cursor: pointer;
  background: transparent;
  border-color: transparent;
  color: transparent;
}
.vid_wrp--range[type=range]::-ms-fill-lower {
  background: linear-gradient(45deg, #00f742, #fb8600);
  border: 0.2px solid #010101;
  border-radius: 50px;
  box-shadow: 0px 0px 0px #000000;
}
.vid_wrp--range[type=range]::-ms-fill-upper {
  background: linear-gradient(45deg, #00f742, #fb8600);
  border: 0.2px solid #010101;
  border-radius: 50px;
  box-shadow: 0px 0px 0px #000000;
}
.vid_wrp--range[type=range]::-ms-thumb {
  box-shadow: 0px 0px 0px rgba(0, 0, 0, 0);
  border: 1px solid #bfbfbf;
  height: 21px;
  width: 21px;
  border-radius: 26px;
  background: #ffffff;
  cursor: pointer;
  height: 7.1px;
}
.vid_wrp--range[type=range]:focus::-ms-fill-lower {
  background: linear-gradient(45deg, #00f742, #fb8600);
}
.vid_wrp--range[type=range]:focus::-ms-fill-upper {
  background: linear-gradient(45deg, #00f742, #fb8600);
}
<input type="range" class="vid_wrp--range" min="3" max="200" value="20">
<input type="range" class="vid_wrp--range" min="3" max="200" value="40">

2
  • Спасибо дружище))
    – makcim512
    17 июл 2019 в 13:33
  • Как перевести ES в js?
    – makcim512
    17 июл 2019 в 13:52
2

Чуть по меньше кода

var range = document.getElementById("range");
var result = document.getElementById("result");

range.oninput = function() {
  result.style.left = this.value + "px";
  result.innerHTML = this.value;
}
.item {
  width: 500px;
  height: 40px;
  position: relative;
}

.range {
  position: absolute;
  bottom: 0;
  width: 100%;
}

.range input {
  display: block;
  width: 100%;
}

#result {
  position: absolute;
  top: 0;
  left: 10px;
}
<div class="item">
  <div id="result"></div>
  <div class="range">
    <input id="range" type="range" min="1" max="480" value="1">
  </div>
</div>

3
  • @makcim512 зря ты перевыбрал ответ 17 июл 2019 в 13:42
  • Его ответ мне показался более интересным! Тем более я думал можно поставить 2 правильных ответа, и изначально я его ответ сделал правильным.
    – makcim512
    17 июл 2019 в 13:45
  • @makcim512 только один ответ 17 июл 2019 в 13:46

Ваш ответ

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

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