CSS before and after pseudo element on input range - HTML CSS CSS Form

HTML CSS examples for CSS Form:input range

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

Description

CSS before and after pseudo element on input range

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">
span {<!--from w w w . j a v  a2 s  .c om-->
   position:relative;
}

span:after {
   position:absolute;
   top:2em;
   right:0em;
   content:attr(data-range-max);
}

span:before {
   position:absolute;
   top:2em;
   content:attr(data-range-min);
}
</style> 
 </head> 
 <body> 
  <span data-range-min="1" data-range-max="5"> <input type="range" id="test" min="1" max="5"> </span>  
 </body>
</html>

Related Tutorials