自定义样式输入类型范围的功能问题答案

【问题标题】：trouble with functionality of custom styled input type range自定义样式输入类型范围的功能问题
【发布时间】：2020-03-15 11:55:56
【问题描述】：

如果您拖动拇指，它将不起作用，因为当我使用 devtools 检查它时，它显然不是输入的一部分，新元素不会考虑它的位置并覆盖它

如果您在输入后删除段落，您可以拖动拇指，渐变将根据它的位置发生变化。

即使我在输入后添加元素，有没有办法让拇指保持工作？

如果您更改#slider padding，渐变会奇怪地增长，如果您添加边距，拇指将不再起作用。

document.querySelector('input').addEventListener('input', ({target: t}) =&gt; t.style.backgroundSize = (t.value/t.max) * 100 + '%');

body {
  display: flex;
  align-items: center;
  flex-direction: column;
  padding: 0 10%;
  font-family: sans-serif;
}

* {
  font-weight: 200;
}

.tags {
  display: flex;
  margin: 25px 0;
}

span {
  flex: 1 1;
  padding-right: 30px;
  align-self: flex-end;
  font-size: 14px;
}

span:last-child {
  text-align: right;
  padding-right: 0px;
}

input {
  position: relative;
  width: 100%;
  cursor: pointer;
  outline: none;
  /* TRACK */
  -webkit-appearance: none;
  /* Hides the slider so that custom slider can be made */
  background: linear-gradient(to left, #8074AE, #CBB0DF) no-repeat;
  background-size: 50%;
}
input::-webkit-slider-runnable-track {
  height: 14px;
  background: #E7E8E9;
  z-index: -1;
}
input::-moz-range-track {
  height: 14px;
  background: #E7E8E9;
  z-index: -1;
}
input::after {
  content: '';
  position: absolute;
  display: block;
  width: 100%;
  height: 10px;
  background: linear-gradient(to left top, transparent 50%, white 55%);
  user-select: none;
  pointer-events: none;
}
input::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 22px;
  height: 22px;
  margin-top: 28px;
  /* You need to specify a margin in Chrome, but in Firefox and IE it is automatic */
  border: solid 2px #E7E8E9;
  border-radius: 0px 50% 50%;
  transform: rotate(45deg);
}
input::-moz-range-thumb {
  -webkit-appearance: none;
  width: 20px;
  height: 20px;
  margin-top: 15px;
  /* You need to specify a margin in Chrome, but in Firefox and IE it is automatic */
  border-radius: 8px;
}

<h1>Уровень владения JavaScript</h1>
<div class="tags">
  <span>Не владею</span>
  <span>Использую готовые решения</span>
  <span>Использую готовые решения и умею переделывать</span>
  <span>Пишу сложный JS с нуля</span>
</div>
<input type="range" min="0" max="1000">
<p>Help me</p>

【问题讨论】：

无论段落标签是否存在（Chrome 80），输入似乎都可以工作并且具有相同的功能
你的 Fiddle 不应该工作吗？因为无论输入后是否有元素，它都适用于FF。
@APAD1 我从那里添加了一个指向 codepen 尝试的链接
@NastyaNastyaa 供以后参考，您可以在 CodePen 中单击 CSS 选项卡右上角的下拉菜单以查看“已编译的 CSS”
@APAD1 谢谢，这是我在这里的第一个问题，我不知道 :)

标签： javascript html css input-type-range

【解决方案1】：

将input 包裹在一个包含元素中，并在该元素上设置height，以便将兄弟元素向下推到range-thumb 下方设置包含元素的z-index，使其位于上方兄弟元素。：

document.querySelector('input').addEventListener('input', ({target: t}) =&gt; t.style.backgroundSize = (t.value/t.max) * 100 + '%');

body {
  display: flex;
  align-items: center;
  flex-direction: column;
  padding: 0 10%;
  font-family: sans-serif;
}

* {
  font-weight: 200;
}

.tags {
  display: flex;
  margin: 25px 0;
}

span {
  flex: 1 1;
  padding-right: 30px;
  align-self: flex-end;
  font-size: 14px;
}

span:last-child {
  text-align: right;
  padding-right: 0px;
}
.input-container {
  display: block;
  width: 100%;
  height: 55px;
  z-index:10;
}
input {
  position: relative;
  width: 100%;
  cursor: pointer;
  outline: none;
  /* TRACK */
  -webkit-appearance: none;
  /* Hides the slider so that custom slider can be made */
  background: linear-gradient(to left, #8074AE, #CBB0DF) no-repeat;
  background-size: 50%;
}
input::-webkit-slider-runnable-track {
  height: 14px;
  background: #E7E8E9;
  z-index: -1;
}
input::-moz-range-track {
  height: 14px;
  background: #E7E8E9;
  z-index: -1;
}
input::after {
  content: '';
  position: absolute;
  display: block;
  width: 100%;
  height: 10px;
  background: linear-gradient(to left top, transparent 50%, white 55%);
  user-select: none;
  pointer-events: none;
}
input::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 22px;
  height: 22px;
  margin-top: 28px;
  /* You need to specify a margin in Chrome, but in Firefox and IE it is automatic */
  border: solid 2px #E7E8E9;
  border-radius: 0px 50% 50%;
  transform: rotate(45deg);
}
input::-moz-range-thumb {
  -webkit-appearance: none;
  width: 20px;
  height: 20px;
  margin-top: 15px;
  /* You need to specify a margin in Chrome, but in Firefox and IE it is automatic */
  border-radius: 8px;
}

<h1>Уровень владения JavaScript</h1>
<div class="tags">
  <span>Не владею</span>
  <span>Использую готовые решения</span>
  <span>Использую готовые решения и умею переделывать</span>
  <span>Пишу сложный JS с нуля</span>
</div>
<div class="input-container">
  <input type="range" min="0" max="1000">
</div>
<p>Help me</p>

【讨论】：