如何实现可见度最小值等于0％，最大值等于100％，但将可能的值限制在10％到90％之间的范围滑块？请参阅随附的示例。
fengeryar 回答：范围限制了可能的输入而不隐藏
为此，您需要HTML和CSS。由于此功能未在“范围”输入中实现，因此我们需要创建自定义变体。
input元素具有“ max”和“ min”属性，这使它变得容易得多，因为我们已经可以设置范围的最小值和最大值，即最小值10％和最大值90％。
我们现在要做的就是创建一个输入为100％的错觉，但实际上并非如此。
这是我想出的：
.container {
width: 100%;
}
.slidecontainer {
display: flex;
}
.normalslide {
width: 100%;
background: #93cfed;
}
.limitedslide {
width: 100%;
background: #93cfed;
}
.limitedslide input {
margin-left: 10%;
max-width: calc(90% - 10%);
}
.slider {
-webkit-appearance: none;
width: 100%;
height: 10px;
background: white;
outline: none;
opacity: 0.7;
-webkit-transition: .2s;
transition: opacity .2s;
}
.slider:hover {
opacity: 1;
}
.slider::-webkit-slider-thumb {
-webkit-appearance: none;
appearance: none;
width: 35px;
height: 35px;
background: #93cfed;
cursor: pointer;
border-radius: 100px;
}
.slider::-moz-range-thumb {
width: 25px;
height: 25px;
background: #4CAF50;
cursor: pointer;
}<h1>Limited Range Slider</h1>
<div class="container">
<p>Default range slider:</p>
<div class="slidecontainer">
<span>0%</span>
<div class="normalslide">
<input type="range" min="1" max="100" value="50" class="slider">
</div>
<span>100%</span>
</div>
<p>Limited range slider (min 10%,max 90%):</p>
<div class="slidecontainer">
<span>0%</span>
<div class="limitedslide">
<input type="range" min="10" max="90" value="50" class="slider">
</div>
<span>100%</span>
</div>
</div>
如果要更改滑块的最小值和最大值，只需更改输入的最小值和最大值，然后更改“ limitedslide”类的“ 90％”和“ 10％”值：
在HTML中：
<input type="range" min="10" max="90" value="50" class="slider">
在CSS中（最小为10％，最大为90％）：
.limitedslide input {
margin-left: 10%;
max-width: calc(90% - 10%);
}