diff --git a/css/style.css b/css/style.css
index 3914911a..554be333 100644
--- a/css/style.css
+++ b/css/style.css
@@ -134,6 +134,10 @@ ul, li {
   margin : 5px;
 }
 
+#preview-fps {
+  width : 200px;
+}
+
 /* Force apparition of scrollbars on leopard */
 ::-webkit-scrollbar {
     -webkit-appearance: none;
diff --git a/index.html b/index.html
index f167a51d..4800f151 100644
--- a/index.html
+++ b/index.html
@@ -33,7 +33,8 @@
         <div class="canvas-background"></div>
       </div>
       <div>
-        <label>Preview FPS:</label><input id="preview-fps" type="text" value="12" />
+        <input id="preview-fps" type="range" min="1" max="24" value="12" style="width:200px;"/>
+        <span id="display-fps">12 fps</span>
       </div>
     </div>
   </div>
diff --git a/js/piskel.js b/js/piskel.js
index 619af33d..527989a0 100644
--- a/js/piskel.js
+++ b/js/piskel.js
@@ -149,7 +149,7 @@
       };
       var refreshUpdater = startPreviewRefresh();
       
-      animFPSTuner.addEventListener('keyup', function(evt) {
+      animFPSTuner.addEventListener('change', function(evt) {
         window.clearInterval(refreshUpdater);
         animPreviewFPS = parseInt(animFPSTuner.value, 10);
         if(isNaN(animPreviewFPS)) {
@@ -167,6 +167,7 @@
         if(animPreviewFPS > 100) {
           animPreviewFPS = 100;
         }
+        $("display-fps").innerHTML = animPreviewFPS + " fps";
         animFPSTuner.value = animPreviewFPS;
         refreshUpdater = startPreviewRefresh();
       });