Use slider for choosing FPS

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;

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>

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();
       });