diff --git a/client/html/index.html b/client/html/index.html
index 222d096..80ca9c4 100644
--- a/client/html/index.html
+++ b/client/html/index.html
@@ -126,8 +126,8 @@
                     </div>
                     <div style="padding: 10px;">
                         <canvas id="grapher" width="800" height="550"></canvas>
-                        <div class="text-right">
-                            <input id="history" type="text" data-slider-max="20" data-slider-step="1">
+                        <div class="text-center">
+                            <input id="history" style="width: 90%" type="text" data-slider-max="0">
                         </div>
                     </div>
                 </div>
diff --git a/client/scripts/application.js b/client/scripts/application.js
index 407a50c..7a69980 100644
--- a/client/scripts/application.js
+++ b/client/scripts/application.js
@@ -28,6 +28,7 @@
     'use strict';
 
     var ctx = {};
+    var log = [];
 
     function onAdjust(name, value) {
         ctx.searchParams[name] = value;
@@ -41,13 +42,8 @@
         };
 
         $.getJSON('/search', query, function(results) {
-            var hintData = {};
-            for (var keyword in results.columns) {
-                hintData[keyword] = results.columns[keyword].hints;
-            }
-
-            ctx.grapher.setColumnHints(hintData);
-            outputResults(results.items, results.count);
+            saveSnapshot(results);
+            outputSnapshot(results);
         });
     }
 
@@ -78,7 +74,8 @@
             ctx.grapher.setColumns(results.columns);
             ctx.grapher.setValueChangedListener(onAdjust);
 
-            outputResults(results.items, results.count);
+            saveSnapshot(results);
+            outputMatches(results.items, results.count);
 
             $('#query').text(keywords.join(', '));
             $('#useLocalScale').click(function() {
@@ -138,11 +135,30 @@
         });
     }
 
-    function onHistory(arg) {
-
+    function onSelectSnapshot() {
+        var snapshot = $('#history').slider('getValue');
+        outputSnapshot(log[snapshot]);
     }
 
-    function outputResults(results, count) {
+    function saveSnapshot(results) {
+        log.push(results);
+
+        var history = $('#history').slider();
+        history.slider('setAttribute', 'max', log.length - 1);
+        history.slider('setValue', log.length - 1);
+    }
+
+    function outputSnapshot(results) {
+        var hintData = {};
+        for (var keyword in results.columns) {
+            hintData[keyword] = results.columns[keyword].hints;
+        }
+
+        ctx.grapher.setColumnHints(hintData);
+        outputMatches(results.items, results.count);
+    }
+
+    function outputMatches(results, count) {
         var searchResultCnt = String(results.length);
         if (results.length < count) {
             searchResultCnt += ' of ' + count;
@@ -195,7 +211,7 @@
                     });
                 });
 
-                $('#history').on('slideStop', onHistory);
+                $('#history').on('slideStop', onSelectSnapshot);
                 $('#learnKeyword').click(onLearn);
                 $('#keywordToLearn').bind('input', function() {
                     $('#learnKeyword').prop('disabled', !$(this).val());