make a custom input range slider - HTML CSS CSS Form

HTML CSS examples for CSS Form:input range

  1. HOME
  2. HTML CSS
  3. CSS Form
  4. input range

Description

make a custom input range slider

Demo Code

ResultView the demo in separate window 

<html>
 <head> 
  <meta name="viewport" content="width=device-width, initial-scale=1"> 
  <style id="compiled-css" type="text/css">
.output {<!--from   w w  w  .  j a va  2 s . c  om-->
   width:100%;
   margin-left:51%;
}

input[type=range] {
   -webkit-appearance:none;
   height:6px;
   width:100%;
   cursor:pointer;
   background:Chartreuse;
   margin-bottom:11px;
}

input[type=range]::-webkit-slider-thumb {
   -webkit-appearance:none;
   border:3px solid yellow;
   height:21px;
   width:21px;
   border-radius:21px;
   background:blue;
   cursor:pointer;
   margin-top:0px;
}

input[type=range]:focus {
   outline:none;
}
</style> 
 </head> 
 <body> 
  <input name="gdskill[1]" class="slider-bar" id="gdskill1" type="range" min="0" value="0" max="10" step="1" list="ticks" oninput="Output1.value = gdskill1.value"> 
  <br> 
  <output id="Output1" class="output">L</output> 
  <div> 
   <input name="gdskill[2]" id="gdskill2" type="range" min="0" value="0" max="10" step="1" list="ticks" oninput="Output2.value = gdskill2.value"> 
   <br> 
   <output id="Output2" class="output">L</output> 
  </div> 
  <datalist id="ticks"> <option>L</option> <option>L</option> <option>L</option> <option>L</option> <option>L</option> <option>L</option> <option>L</option> <option>L</option> <option>L</option> <option>L</option> <option>Lo</option> </datalist>  
 </body>
</html>

Related Tutorials