--- a/static/color-slider.js	Sun Apr 20 23:51:57 2014 +0300
+++ b/static/color-slider.js	Mon Apr 21 00:03:49 2014 +0300
@@ -27,10 +27,21 @@
         color[c] = 255;
 
         input.val(value.toString(16));
-        input.background_color(color.r, color.b, color.g, value / 255);
+        input.background_color(color.r, color.g, color.b, value / 255);
     });
 }
 
+function color_slider_input (input, c) {
+    var value;
+
+    if (input.val())
+        value = parseInt(input.val(), 16);
+    else
+        value = 0;
+    
+    $('#slider-' + c).slider('value', value);
+}
+
 $(function () {
     $('.color-slider').slider({
         orientation:    'horizontal',
@@ -43,13 +54,11 @@
     
     $(['r', 'g', 'b']).each(function (i, c) {
         var input = $('#' + c);
-        var value;
 
-        if (input.val())
-            value = parseInt(input.val(), 16);
-        else
-            value = 0;
-        
-        $('#slider-' + c).slider('value', value);
+        // bind
+        input.change(function () { color_slider_input($(this), this.id); });
+
+        // initialize
+        color_slider_input(input, c);
     });
 });