Tuesday, May 13, 2014

Let's Do the Time Slide Again!

The official start of my internship with Wikimedia is rapidly approaching, so I've started hacking away at the first listed goal: The TimeSlider.

I've got this as a beginning prototype:

<!doctype html>
<html lang='en'>
<head>
  <meta charset='utf-8'>
  <title>jQuery UI Slider - Range Slider</title>
  <link rel='stylesheet' href='http://code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css'>
  <script src='http://code.jquery.com/jquery-1.10.2.js'></script>
  <script src='http://code.jquery.com/ui/1.10.4/jquery-ui.js'></script>
  <script>
    $(function() {
      $('#slider-range').slider({
        range: true,
        min: 0,
        max: 500,
        values: [75, 300],
        slide: function(event, ui) {
          $('#amount').val('$' + ui.values[0] + ' - $' + ui.values[1]);
        }
      });
      $('#amount').val($('#slider-range').slider('values', 0) + ' - ' + 
         $('#slider-range').slider('values', 1));
    });


I posted a link to a working model on the Open Historical Streetmap mailing list, the Bugzilla report and on the Github issues page. I've been getting some great (if somewhat conflicting ;) ) feedback, which was just what I needed. I will post more soon!

No comments:

Post a Comment

Comments? Questions? Complaints? Coladas?