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

Question

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

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

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

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

document.querySelector('input').addEventListener('input', ({target: t}) => 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>

标签： javascripthtmlcssinput-type-range

Answer 1

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

document.querySelector('input').addEventListener('input', ({target: t}) => 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>