#slider {
margin-top: 20px;
margin-left:5%;
width: 80%;
}
#slider:before {
content: '-';
font-size: 18px;
font-weight: bold;
margin-left: -20px;
margin-top: -4px;
position:absolute;
z-index: 99;
}
#counter {
font-size: 18px;
font-weight: bold;
margin-left: 560px;
margin-top: -35px;
position: absolute;
z-index: 99;
}
#counter:before {
content: '+ ';
}  
#counter:after {
content: '%';
}
.rangeslider,
.rangeslider__fill {
height: 12px;
border-radius: 6px;
background-clip: padding-box;
background-color: #f0c514;
box-shadow: 0 1px 0 #fa7346, inset 3px 4px 5px rgba(0, 0, 0, 0.21);
}
.rangeslider__handle {
width: 22px;
height: 22px;
border: 0;
top: -5px;
border-radius: 11px;
background-clip: padding-box;

box-shadow: 0 1px 2px rgba(0, 0, 0, 0.44), inset 0 1px 0 #fff;
background-image: -webkit-linear-gradient(bottom, #dddddd 0%, #f9f9f9 100%);
background-image: linear-gradient(to top, #dddddd 0%, #f9f9f9 100%);
}

#ruler {
position: relative;
height: 20px;
}
#ruler span {
position: absolute;
width: 10px;
top: 10px;
color: #f6f6f6;
font-size: 10px;
text-shadow: 0 1px 0 #9e2d04;
}
#ruler span:nth-child(1) {
left: 0%;
}
#ruler span:nth-child(2) {
left: 11%;
}
#ruler span:nth-child(3) {
left: 22%;
}
#ruler span:nth-child(4) {
left: 33%;
}
#ruler span:nth-child(5) {
left: 44%;
}
#ruler span:nth-child(6) {
left: 55%;
}
#ruler span:nth-child(7) {
left: 66%;
}
#ruler span:nth-child(8) {
left: 77%;
}
#ruler span:nth-child(9) {
left: 88%;
}
#ruler span:nth-child(10) {
left: 95%;
}