D3 Slider Design

HTML

<script src="//d3js.org/d3.v3.min.js"></script>
<script src="//rawgit.com/MasterMaps/d3-slider/master/d3.slider.js"></script>
<script src="//rawgit.com/gka/d3-jetpack/master/d3-jetpack.js"></script>
<script src="//rawgit.com/kristw/75b61f9beeab9b530612/raw/389e984e4041117a9185cf6edad9f6b85a38097a/d3kit.min.js"></script>
<script src="//rawgit.com/DarkMarmot/kodama/master/kodama.js"></script>
<div class="container-fluid" id="main">
    <div class="row">
        <div class="col-xs-12">
           <svg width="350" height="60">
             <rect width="20" height="20" rx="5" ry="5" 
                   style="fill:#ddd;border-radius:3px;" 
                   />
               <text x = 10 y = 10 text-anchor='middle' alignment-baseline='middle' style='font-size:11px;font-family:Helvetica;'>20</text>
              <g transform='translate(60, 0)'>
                  <rect width="20" height="20" rx="5" ry="5" 
                   style="fill:steelblue;border-radius:3px;" 
                   />
                                 <text x = 10 y = 10 text-anchor='middle' alignment-baseline='middle' fill='#fff' style='font-size:11px;font-family:Helvetica;'>20</text>
              </g>
              <g transform='translate(0, 30)'>
                   <rect class='front' width="400" height="10"
                   style="fill:#ddd;border-radius:3px;" 
                   />
                                     <rect class='back' width="70" height="10"
                   style="fill:steelblue;border-radius:3px;" 
                   />
                  <rect x="70" y="-5" width="2" height="20" 
                   style="fill:steelblue;border-radius:3px;" 
                   />
              </g>
           </svg>
        </div>
    </div>
</div>

CSS

.d3-slider {
    position: relative;
    font-family: Verdana,Arial,sans-serif;
    font-size: 1.1em;
    border: 1px solid #aaaaaa;
    z-index: 2;
}

.d3-slider-horizontal {
    height: .5em;
    background: #ddd;
    border: none;
}  

.d3-slider-range {
  background:#2980b9;
  left:0px;
  right:0px;
  height: 0.8em;
  position: absolute;
}



.d3-slider-vertical {
    width: .8em;
    height: 100px;
}      

.d3-slider-handle {
    position: absolute;
    width: 1em;
    height: 1em;
    border-radius: 20px;
    background: black;
    z-index: 3;
}

/*
.d3-slider-handle:hover {
    border: 1px solid #999999;
}
*/

.d3-slider-horizontal .d3-slider-handle {
    top: -.3em;
    margin-left: -.6em;
}

.d3-slider-axis {
    position: relative;
    z-index: 1;    
}

.d3-slider-axis-bottom {
    top: .8em;
}

.d3-slider-axis-right {
    left: .8em;
}

.d3-slider-axis path {
    stroke-width: 0;
    fill: none;
}

.d3-slider-axis line {
    fill: none;

    shape-rendering: crispEdges;
}

.d3-slider-axis text {
    font-size: 11px;
}

.d3-slider-vertical .d3-slider-handle {
    left: -.25em;
    margin-left: 0;
    margin-bottom: -.6em;      
}

#main{
 margin: 20px;
 padding: 10px;
}