How to set min and max value in range input using CSS - html

Question

I have created a range slider using CSS and customized the as per my requirement. This is how it's looks like :
.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>
But I need to set the Minimum value inside the beginning of the range and set the Maximum value inside the end of the range using CSS.

Answer 1

try to give .slidecontainer
position:relative;
and set the .min and .max spans as
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

Perhaps like this:
.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>