如果您拖动拇指,它将不起作用,因为当我使用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>
将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>