Fixes for issue egorkhmelev#18: sliders wider than 500px don't render properly.

Added "fill" image in centre of sliders and changed background-repeat
property for main slider and range indicator; modified sprite PNGs to
include a bar suitable for repeating.

Author: ian-ross

bin/jquery.slider.min.css

@@ -12,12 +12,13 @@
 
   .jslider .jslider-bg { position: relative; }
   .jslider .jslider-bg i { height: 5px; position: absolute; font-size: 0; top: 0; }
-  .jslider .jslider-bg .l { width: 50%; background-position: 0 0; left: 0; }
-  .jslider .jslider-bg .r { width: 50%; left: 50%; background-position: right 0; }
-  .jslider .jslider-bg .v { position: absolute; width: 60%; left: 20%; top: 0; height: 5px; background-position: 0 -20px; }
+  .jslider .jslider-bg .l { width: 10%; background-position: 0 0; left: 0; }
+  .jslider .jslider-bg .f { width: 80%; left: 10%; background-repeat: repeat-x; background-position: 0 -20px; }
+  .jslider .jslider-bg .r { width: 10%; left: 90%; background-position: right 0; }
+  .jslider .jslider-bg .v { position: absolute; width: 60%; left: 20%; top: 0; height: 5px; background-repeat: repeat-x; background-position: 0 -40px; }
 
-  .jslider .jslider-pointer { width: 13px; height: 15px; background-position: 0 -40px; position: absolute; left: 20%; top: -4px; margin-left: -6px; cursor: pointer; cursor: hand; }
-  .jslider .jslider-pointer-hover { background-position: -20px -40px; }
+  .jslider .jslider-pointer { width: 13px; height: 15px; background-position: 0 -60px; position: absolute; left: 20%; top: -4px; margin-left: -6px; cursor: pointer; cursor: hand; }
+  .jslider .jslider-pointer-hover { background-position: -20px -60px; }
   .jslider .jslider-pointer-to { left: 80%; }
 
   .jslider .jslider-label { font-size: 9px; line-height: 12px; color: black; opacity: 0.4; white-space: nowrap; padding: 0px 2px; position: absolute; top: -18px; left: 0px; }

bin/jquery.slider.min.js

@@ -170,7 +170,7 @@
       '<span class="<%=className%>">' +
         '<table><tr><td>' +
           '<div class="<%=className%>-bg">' +
-            '<i class="l"></i><i class="r"></i>' +
+            '<i class="l"></i><i class="f"></i><i class="r"></i>' +
             '<i class="v"></i>' +
           '</div>' +
 
@@ -697,4 +697,4 @@
 	  this.parent.redraw(this);
 	};
 
-})(jQuery);
+})(jQuery);