/*the slider background*/ .ui-slider { width:230px; height:11px; background: image-url('js/jquery-ui/slider-custom/slider-bg.png'); position:relative; margin:0; padding:0 10px; } /*Style for the slider button*/ .ui-slider-handle { width:24px; height:24px; position:absolute; top:-7px; margin-left:-12px; z-index:200; background:image-url('js/jquery-ui/slider-custom/slider-button.png'); } /*Result div where the slider value is displayed*/ #slider-result { font-size:50px; height:200px; font-family:Arial, Helvetica, sans-serif; color:#fff; width:250px; text-align:center; text-shadow:0 1px 1px #000; font-weight:700; padding:20px 0; } /*This is the fill bar colour*/ .ui-widget-header { background:image-url('js/jquery-ui/slider-custom/fill.png') no-repeat left; height:8px; left:1px; top:1px; position:absolute; }