implement a slider using google map api
<p>I have created a webpage which uses Google Map API.<br>
<a href="https://jsfiddle.net/geocodezip/m2rp2aca/8/" rel="nofollow">JSfiddle</a><br></p>

<pre><code>function initMap() {

    var intervalForAnimation;
    var count = 0;

    var map = new google.maps.Map(document.getElementById('map'), {
      center: {lat: 19.0760, lng: 72.8777},
      zoom: 5,
      styles: [
        {
          featureType: 'all',
          stylers: [
            { saturation: -80 }
          ]
        },{
          featureType: 'road.arterial',
          elementType: 'geometry',
          stylers: [
            { hue: '#00ffee' },
            { saturation: 50 }
          ]
        },{
          featureType: 'poi.business',
          elementType: 'labels',
          stylers: [
            { visibility: 'off' }
          ]
        }
      ]
    });

    // Define the symbol, using one of the predefined paths ('CIRCLE')
    // supplied by the Google Maps JavaScript API.
      var symbolSource = {
      path: 'M -2,-2 2,2 M 2,-2 -2,2',
      strokeColor: '#FF0000',
      strokeWeight: 4
    };

    var symbolShape = {
      path: google.maps.SymbolPath.FORWARD_CLOSED_ARROW,
      strokeColor: '#0000FF',
      strokeOpacity: 1.0
    };

    var symbolDestination = {
      path: 'M -2,-2 2,2 M 2,-2 -2,2',
      strokeColor: '#292',
      strokeWeight: 4
    };

    // Create the polyline and add the symbol to it via the 'icons' property.
    var line = new google.maps.Polyline({
      path: [{lat: -33.918861, lng: 18.423300}, {lat: -35.842160, lng: 18.863525}, {lat: -39.170387, lng: 35.189209}, {lat: -26.331494, lng: 54.228516}, {lat: 0.462885, lng: 61.083984}, {lat: 19.075984, lng: 72.877656}],
      icons: [
        {
          icon: symbolShape,
          offset: '0%'
        }
      ],
      strokeColor: '#0000FF ',
      strokeOpacity: 0,
      map: map
    });

    //Our Secondary polyline for reseting purpose
    var line1 = new google.maps.Polyline({
      path: [{lat: -33.918861, lng: 18.423300}, {lat: -35.842160, lng: 18.863525}, {lat: -39.170387, lng: 35.189209}, {lat: -26.331494, lng: 54.228516}, {lat: 0.462885, lng: 61.083984}, {lat: 19.075984, lng: 72.877656}],
      icons: [
        {
          icon: symbolSource,
          offset: '0%'
        }, {
          icon: symbolDestination,
          offset: '100%'
        }
      ],
      strokeColor: '#0000FF ',
      strokeOpacity: 0.8,
      map: map
    });


      //Map boundaries
      var bounds = new google.maps.LatLngBounds();
        for (var i = 0; i &lt; line.getPath().getLength(); i++) {
          bounds.extend(line.getPath().getAt(i));
        }
      map.fitBounds(bounds);

    function playing() {
          intervalForAnimation = window.setInterval(function() {
              $("#map").after(animateCircle(line,count));
              count = (count+0.2) % 200;
          }, 20);
      }
      $(".play").click(function() {
          playing();
          pb = new progressBar();
          map.controls[google.maps.ControlPosition.RIGHT].push(pb.getDiv());
      });

      $(".pause").click(function() {
          clearInterval(intervalForAnimation);
      });

      $(".reset").click(function(){
          count = 0;
          line1.setMap(map);
      });

  // Use the DOM setInterval() function to change the offset of the symbol
  // at fixed intervals.
  function animateCircle(line,count) {
      var icons = line.get('icons');
      //if ((icons[0].offset &lt;= 100 + '%')) {
      icons[0].offset = (count / 2) + '%';
      line.set('icons', icons);
      if (count &gt;= 199){ 
        clearInterval(intervalForAnimation);
        line1.setMap(null);
      };
      //n++;
    //};
  }

}
    var intervalForAnimation;
    var count = 0;

    var map = new google.maps.Map(document.getElementById('map'), {
      center: {lat: 19.0760, lng: 72.8777},
      zoom: 5,
      styles: [
        {
          featureType: 'all',
          stylers: [
            { saturation: -80 }
          ]
        },{
          featureType: 'road.arterial',
          elementType: 'geometry',
          stylers: [
            { hue: '#00ffee' },
            { saturation: 50 }
          ]
        },{
          featureType: 'poi.business',
          elementType: 'labels',
          stylers: [
            { visibility: 'off' }
          ]
        }
      ]
    });

    // Define the symbol, using one of the predefined paths ('CIRCLE')
    // supplied by the Google Maps JavaScript API.
      var symbolSource = {
      path: 'M -2,-2 2,2 M 2,-2 -2,2',
      strokeColor: '#FF0000',
      strokeWeight: 4
    };

    var symbolShape = {
      path: google.maps.SymbolPath.FORWARD_CLOSED_ARROW,
      strokeColor: '#0000FF',
      strokeOpacity: 1.0
    };

    var symbolDestination = {
      path: 'M -2,-2 2,2 M 2,-2 -2,2',
      strokeColor: '#292',
      strokeWeight: 4
    };

    // Create the polyline and add the symbol to it via the 'icons' property.
    var line = new google.maps.Polyline({
      path: [{lat: -33.918861, lng: 18.423300}, {lat: -35.842160, lng: 18.863525}, {lat: -39.170387, lng: 35.189209}, {lat: -26.331494, lng: 54.228516}, {lat: 0.462885, lng: 61.083984}, {lat: 19.075984, lng: 72.877656}],
      icons: [
        {
          icon: symbolShape,
          offset: '0%'
        }
      ],
      strokeColor: '#0000FF ',
      strokeOpacity: 0,
      map: map
    });

    //Our Secondary polyline for reseting purpose
    var line1 = new google.maps.Polyline({
      path: [{lat: -33.918861, lng: 18.423300}, {lat: -35.842160, lng: 18.863525}, {lat: -39.170387, lng: 35.189209}, {lat: -26.331494, lng: 54.228516}, {lat: 0.462885, lng: 61.083984}, {lat: 19.075984, lng: 72.877656}],
      icons: [
        {
          icon: symbolSource,
          offset: '0%'
        }, {
          icon: symbolDestination,
          offset: '100%'
        }
      ],
      strokeColor: '#0000FF ',
      strokeOpacity: 0.8,
      map: map
    });


      //Map boundaries
      var bounds = new google.maps.LatLngBounds();
        for (var i = 0; i &lt; line.getPath().getLength(); i++) {
          bounds.extend(line.getPath().getAt(i));
        }
      map.fitBounds(bounds);

    function playing() {
          intervalForAnimation = window.setInterval(function() {
              $("#map").after(animateCircle(line,count));
              count = (count+0.2) % 200;
          }, 20);
      }
      $(".play").click(function() {
          playing();
          pb = new progressBar();
          map.controls[google.maps.ControlPosition.RIGHT].push(pb.getDiv());
      });

      $(".pause").click(function() {
          clearInterval(intervalForAnimation);
      });

      $(".reset").click(function(){
          count = 0;
          line1.setMap(map);
      });

  // Use the DOM setInterval() function to change the offset of the symbol
  // at fixed intervals.
  function animateCircle(line,count) {
      var icons = line.get('icons');
      //if ((icons[0].offset &lt;= 100 + '%')) {
      icons[0].offset = (count / 2) + '%';
      line.set('icons', icons);
      if (count &gt;= 199){ 
        clearInterval(intervalForAnimation);
        line1.setMap(null);
      };
   }

 }
</code></pre>

<p><a href="http://i.stack.imgur.com/irU7F.png" rel="nofollow">The Webpage SS</a></p>

<p>I want to implement a slider which has the limits of the date given by user to it. And the slider should be interactive ie the user can jump forward or backward just by clicking on the slider line eg the slider used in YouTube.<br>
Note:Implementation of slider and controlling the animation of the symbol with the slider line is primary objective. Setting the limits is secondary objective.
<br>
I tried implementing it,but wasn't able to get success.</p>