title: How to set min and max value in range input using CSS
body: <p>I have created a range slider using CSS and customized the as per my requirement. This is how it's looks like : </p>
  
  <p><a href="https://i.stack.imgur.com/zm97v.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/zm97v.png" alt="Current range image"></a></p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code> .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;
   }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="slidecontainer"&gt;
    &lt;span&gt;10&lt;/span&gt;&lt;input type="range" min="10" max="100" value="40" class="slider" id="myRange"&gt;&lt;span&gt;100&lt;/span&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>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. </p>