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

Question

我已经使用CSS创建了范围滑块，并根据需要自定义了。它是这样的：

	.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>

Answer 2

也许是这样的：

.slidecontainer {
  width: 18%;
  pointer-events: none;
  margin: 1em auto;
  display: flex;
  flex-direction: column;
}

span:last-child {
  align-self: flex-end;
}

.slider {
  -webkit-appearance: none;
  width: 100%;
  height: 30px;
  background: #dadada;
  outline: none;
  opacity: 0.7;
  -webkit-transition: .2s;
  transition: opacity .2s;
  position: relative;
}

.slider::before,
.slider::after {
  content: "";
  width: 10%;
  height: 100%;
  background: inherit;
  position: absolute;
}

.slider::before {
  right: 100%;
  border-radius: 15px 0 0 15px;
}

.slider::after {
  left: 100%;
  border-radius: 0 15px 15px 0;
}

.slider:hover {
  opacity: 1;
}

.slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 10%;
  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="10" class="slider" id="myRange"><span>100</span>
</div>

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