html - 如何使用 CSS 在范围输入中设置最小值和最大值

Question

我使用 CSS 创建了一个范围 slider ，并根据我的要求对其进行了自定义。这是它的样子:

	.slidecontainer {
	  width: 18%;
	  pointer-events: none;
	}

	.slider {
	  -webkit-appearance: none;
	  width: 100%;
	  height: 30px;
	  background: #dadadaa3;
	  outline: none;
	  opacity: 0.7;
	  -webkit-transition: .2s;
	  transition: opacity .2s;
	  border-radius: 10px;
	}

	.slider:hover {
	  opacity: 1;
	}

	.slider::-webkit-slider-thumb {
	  -webkit-appearance: none;
	  appearance: none;
	  width: 15px;
	  height: 30px;
	  background: #4CAF50;
	  cursor: pointer;
	  pointer-events:auto;
	}

	.slider::-moz-range-thumb {
	  width: 25px;
	  height: 25px;
	  background: #4CAF50;
	  cursor: pointer;
	}

<div class="slidecontainer">
  <span>10</span><input type="range" min="10" max="100" value="40" class="slider" id="myRange"><span>100</span>
</div>

但我需要使用 CSS 在范围的开头设置最小值并在范围的结尾设置最大值。

Answer 1

尝试给 .slidecontainer

position:relative; 

并将 .min 和 .max 跨度设置为

position:absolute;

	.slidecontainer {
	  width: 18%;
          position:relative;
	  pointer-events: none;
	}

	.slider {
      
	  -webkit-appearance: none;
	  height: 30px;
	  background: #dadadaa3;
	  outline: none;
	  opacity: 0.7;
	  -webkit-transition: .2s;
	  transition: opacity .2s;
	  border-radius: 10px;
	}

	.slider:hover {
	  opacity: 1;
	}

	.slider::-webkit-slider-thumb {
	  -webkit-appearance: none;
	  appearance: none;
	  width: 15px;
	  height: 30px;
	  background: #4CAF50;
	  cursor: pointer;
	  pointer-events:auto;
	}

	.slider::-moz-range-thumb {
	  width: 25px;
	  height: 25px;
	  background: #4CAF50;
	  cursor: pointer;
	}
        .min {
          position:absolute;
          left: 3px;
          top:8px;
        }
        .max {
         position:absolute;
         right: -12px;
         top: 8px;
        }

<div class="slidecontainer">
  <span class="min">10</span><input type="range" min="10" max="100" value="40" class="slider" id="myRange"><span class="max">100</span>
</div>