CSS
#price {
-webkit-appearance: none;
appearance: none;
padding: 0;
width: 460px;
height: 8px;
background: #eff1f1;
overflow: hidden;
}
#price::-moz-range-thumb { /* ползунок в Firefox */
border-radius: 2px;
box-shadow: -13px 0 #71bb3e, -26px 0 #71bb3e, -39px 0 #71bb3e, -52px 0 #71bb3e, -65px 0 #71bb3e, -78px 0 #71bb3e, -91px 0 #71bb3e, -104px 0 #71bb3e, -117px 0 #71bb3e, -130px 0 #71bb3e, -143px 0 #71bb3e, -156px 0 #71bb3e, -169px 0 #71bb3e, -169px 0 #71bb3e, -182px 0 #71bb3e, -195px 0 #71bb3e, -208px 0 #71bb3e, -221px 0 #71bb3e, -234px 0 #71bb3e, -247px 0 #71bb3e, -260px 0 #71bb3e, -273px 0 #71bb3e, -286px 0 #71bb3e, -299px 0 #71bb3e, -312px 0 #71bb3e, -325px 0 #71bb3e, -338px 0 #71bb3e, -351px 0 #71bb3e, -364px 0 #71bb3e, -377px 0 #71bb3e, -390px 0 #71bb3e, -403px 0 #71bb3e, -416px 0 #71bb3e, -429px 0 #71bb3e, -442px 0 #71bb3e, -455px 0 #71bb3e, -468px 0 #71bb3e;
}
#price::-moz-range-track { /* линия, по которой он ездит в Firefox */
background: #eff1f1;
border: none;
}
#price::-webkit-slider-thumb { /* ползунок в Хроме */
-webkit-appearance: none;
width:15px;
height:15px;
border: 1px solid #818181;
border-radius: 2px;
background:url(http://rk-evropa.ru/slider-button.png);
box-shadow: -13px 0 #71bb3e, -26px 0 #71bb3e, -39px 0 #71bb3e, -52px 0 #71bb3e, -65px 0 #71bb3e, -78px 0 #71bb3e, -91px 0 #71bb3e, -104px 0 #71bb3e, -117px 0 #71bb3e, -130px 0 #71bb3e, -143px 0 #71bb3e, -156px 0 #71bb3e, -169px 0 #71bb3e, -169px 0 #71bb3e, -182px 0 #71bb3e, -195px 0 #71bb3e, -208px 0 #71bb3e, -221px 0 #71bb3e, -234px 0 #71bb3e, -247px 0 #71bb3e, -260px 0 #71bb3e, -273px 0 #71bb3e, -286px 0 #71bb3e, -299px 0 #71bb3e, -312px 0 #71bb3e, -325px 0 #71bb3e, -338px 0 #71bb3e, -351px 0 #71bb3e, -364px 0 #71bb3e, -377px 0 #71bb3e, -390px 0 #71bb3e, -403px 0 #71bb3e, -416px 0 #71bb3e, -429px 0 #71bb3e, -442px 0 #71bb3e, -455px 0 #71bb3e, -468px 0 #71bb3e;
}