<script>
  function changeLegend(start) {
    $('#legend').html(new Date(start))
    }
  function addTimeSlider(sublayer) {
         var sql = cartodb.SQL({ user: 'ssci582-user12' })
         // fetch time range
         sql.execute('SELECT max(date), min(date) FROM History', function(data) {
           var range = data.rows[0];
           var max = new Date(range.max).getTime()
           var min = new Date(range.min).getTime()
           // update slider with range
             $("#slider").slider({
              range: true,
              min: min,
              max: max,
              values: [ min , max],
              change: function(event, ui) {
                // give feedback to the user on slide change
                changeLegend(ui.values[0], ui.values[1]);
              },
              stop: function( event, ui ) {
                // when user selects the dates, update the layer with the range
                var start = new Date(ui.values[0]).toISOString()
                var end = new Date(ui.values[1]).toISOString();

                // build sql
                sublayer.setSQL("SQL QUERY GOES HERE" [i've already verified it's correct]);
                }
            });

                changeLegend(min, max);
         });
     }

function main() {
    var map;

    cartodb.createVis('map', 'http://[username]/api/v2/viz/...json', {
    shareable: true,
    title: true,
    description: false,
    layer_selector: true,
    center_lat: 35.79,
    center_lon: -78.65,
    zoom: 10
})

.done(function(vis, layers) {

    layers[1].setInteraction(true);
    layers[1].on('featureOver', function(e, pos, latlng, data) {
        cartodb.log.log(e, pos, latlng, data);
    });

    var vislayers = vis.getLayers();
    addTimeSlider(vislayers[1].getSubLayer(0));
    map = vis.getNativeMap();

    })

    .error(function(err) {
        console.log(err);
    });

}
window.onload = main;