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

问题描述 投票:1回答:1

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

如果在输入后删除段落,则可以拖动拇指,渐变会根据其位置而变化。

即使在输入之后添加元素,有没有办法使拇指保持正常工作?

如果更改#slider填充,渐变会怪异地增长,如果添加空白,则拇指将不再起作用。

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>
javascript html sass input-type-range
1个回答
0
投票

input包裹在包含元素中,并在该元素上设置height,以便将同级元素向下推到range-thumb之下。也将包含元素的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>
© www.soinside.com 2019 - 2024. All rights reserved.