Create a slider with marker using div and CSS - HTML CSS CSS Widget

HTML CSS examples for CSS Widget:Slider

  1. HOME
  2. HTML CSS
  3. CSS Widget
  4. Slider

Description

Create a slider with marker using div and CSS

Demo Code

ResultView the demo in separate window 

<html lang="en">
 <head> 
  <style>
.slider {<!--  w  w w.j  a v  a  2s  .  c  o m-->
   width:501px;
   height:21px;
   border-bottom:3px solid Chartreuse;
}

.slider .pin {
   height:100%;
   width:11%;
   float:left;
   border-right:3px solid yellow;
   transform:translateY(56%);
   box-sizing:border-box;
}

.slider .pin:last-child {
   display:none;
}
</style> 
 </head> 
 <body translate="no"> 
  <div class="slider"> 
   <div class="pin"> 
   </div> 
   <div class="pin"> 
   </div> 
   <div class="pin"> 
   </div> 
   <div class="pin"> 
   </div> 
   <div class="pin"> 
   </div> 
   <div class="pin"> 
   </div> 
   <div class="pin"> 
   </div> 
   <div class="pin"> 
   </div> 
   <div class="pin"> 
   </div> 
   <div class="pin"> 
   </div> 
  </div>  
 </body>
</html>

Related Tutorials