Css Scale

by Ankit Patidar

HTML

<div class="sliderQuad">
                    	
                    	<span class="irs-grid">
                        	<span style="left:0" class="irs-grid-pol"><span>0</span></span>
                            <span style="left:2%" class="irs-grid-pol small"></span>
                            <span style="left:4%" class="irs-grid-pol small"></span>
                            <span style="left:6%" class="irs-grid-pol small"></span>
                            <span style="left:8%" class="irs-grid-pol small"></span>
                            <span style="left:10%" class="irs-grid-pol"><span>10</span></span>
                            <span style="left:12%" class="irs-grid-pol small"></span>
                            <span style="left:14%" class="irs-grid-pol small"></span>
                            <span style="left:16%" class="irs-grid-pol small"></span>
                            <span style="left:18%" class="irs-grid-pol small"></span>
                            <span style="left:20%" class="irs-grid-pol"><span>20</span></span>
                            <span style="left:22%" class="irs-grid-pol small"></span>
                            <span style="left:24%" class="irs-grid-pol small"></span>
                            <span style="left:26%" class="irs-grid-pol small"></span>
                            <span style="left:28%" class="irs-grid-pol small"></span>
                            <span style="left:30%" class="irs-grid-pol"><span>30</span></span>
                            <span style="left:32%" class="irs-grid-pol small"></span>
                            <span style="left:34%" class="irs-grid-pol small"></span>
                            <span style="left:36%" class="irs-grid-pol small"></span>
                            <span style="left:38%" class="irs-grid-pol small"></span>
                            <span style="left:40%" class="irs-grid-pol"><span>40</span></span>
                            <span style="left:41%"...

CSS

.sliderQuad{position:relative;height:50px}
.irs-grid{
    background-color: #f1f1f1;
    border-radius: 3px;
    height: 6px;
    left: 0;
    position: absolute;
    width: 100%;
}
.irs-grid-pol {
    background-color: #666;
    height: 8px;
    left: 0;
    position: absolute;
    top: 15px;
    width: 1px;
}
.irs-grid-pol.small {
    height: 4px;
	background-color: #808;
}
.irs-grid-pol > span {
    color: #666;
    display: inline-block;
    font-weight: 600;
    margin-left: -6px;
    margin-top: 10px;
}
.irs-grid-pol:first-child > span {
    margin-left: -4px;
}
.irs-grid-pol:last-child > span {
    margin-left: -17px;
}