Как прикрепить облачко к range?

101
10 апреля 2021, 05:10

.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)

Answer 1

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

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>

Answer 2

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

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">

READ ALSO
HTML+CSS structure (header+menu+aside+main+footer)
HTML

HTML+CSS structure (header+menu+aside+main+footer)

 96
Как получить значение тега вложенного элемента?
c#

Как получить значение тега вложенного элемента?

Есть xml-файл с элементом <casdo:ProcedureCode >78</casdo:ProcedureCode>, который есть где-то вначале документа:

 67
Ошибка в NancyFx: Cannot apply indexing with [] to an expression of type &#39;method group&#39;
c#

Ошибка в NancyFx: Cannot apply indexing with [] to an expression of type 'method group'

Я пытаюсь создать класс (модуль Nancy) и получаю следующую ошибку:

 82
Как добавить decimal в базу данных Access через EF Core?
c#

Как добавить decimal в базу данных Access через EF Core?

Имем сущность Contracts со свойством SalaryДобавление в базу с помощью метода Add()

 87