Range input indicator for position 0, and datalist - HTML CSS CSS Layout

HTML CSS examples for CSS Layout:Position

  1. HOME
  2. HTML CSS
  3. CSS Layout
  4. Position

Description

Range input indicator for position 0, and datalist

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">
#cont {<!--from   w  w  w.j  av a2  s.  c om-->
   position:relative;
   width:401px;
}

#zero {
   position:absolute;
   left:51%;
   color:Chartreuse;
}

#rangeInput {
   margin-top:21px;
   width:411px;
}
</style> 
 </head> 
 <body> 
  <div id="cont"> 
   <span id="zero">L</span> 
   <input id="rangeInput" type="range" min="-4830" max="5000" value="0" step="1" list="numbers" oninput="amount.value=rangeInput.value"> 
   <datalist id="numbers"> <option>L</option> </datalist> 
  </div> 
  <output id="amount" name="amount" for="rangeInput">L</output> 
  <script type="text/javascript">

      </script>  
 </body>
</html>

Related Tutorials