And-How/index.html

## index.html
<!DOCTYPE html>
<html>

<head>
    <title>Leaflet Time Slider Example</title>
    <meta charset="utf-8" />

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.7.2/leaflet.css" />
    <!--[if lte IE 8]><link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.5.1/leaflet.ie.css" /><![endif]-->
    <link rel="stylesheet" href="http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css" type="text/css">
</head>

<body>
    <div id="map" style="width: 100%; height: 600px"></div>

    <script src="http://cdn.leafletjs.com/leaflet-0.7.2/leaflet.js"></script>
    <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
    <script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>

    <!-- Include this library for mobile touch support  -->
    <script src="//cdnjs.cloudflare.com/ajax/libs/jqueryui-touch-punch/0.2.2/jquery.ui.touch-punch.min.js"></script>


    <script src="SliderControl.js"></script>

    <script>
    var sliderControl = null;

    var myMap = L.map('map').setView([52.06, 7.40], 10);

    L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
        attribution: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
    }).addTo(myMap);


    //Use usual LayerGroups instead of GeoJSON fetched markers
    /*
    var marker1 = L.marker([51.933292258, 7.582512743], {time: "2013-01-22 08:42:26+01"});
    var marker2 = L.marker([51.9, 7.6], {time: "2013-01-22 10:00:26+01"});
    var marker3 = L.marker([51.7, 7.7], {time: "2013-01-22 10:03:29+01"});

    var pointA = new L.LatLng(51.8, -0.09);
    var pointB = new L.LatLng(51.9, -0.2);
    var pointList = [pointA, pointB];

    var polyline = new L.Polyline(pointList, {
      time: "2013-01-22 10:24:59+01",
      color: 'red',
      weight: 3,
      opacity: 1,
      smoothFactor: 1
    });


    layerGroup = L.layerGroup([marker1, marker2, marker3, polyline]);
    var sliderControl = L.control.sliderControl({layer:layerGroup, follow: true});
    myMap.addControl(sliderControl);
    sliderControl.startSlider();
  */


    //Fetch some data from a GeoJSON file
    $.getJSON("points.json", function(json) {
        var testlayer = L.geoJson(json),
            sliderControl = L.control.sliderControl({
                position: "topright",
                layer: testlayer
            });

        //For a Range-Slider use the range property:
        sliderControl = L.control.sliderControl({
            position: "topright",
            layer: testlayer,
            range: true
        });

        //Make sure to add the slider to the map ;-)
        myMap.addControl(sliderControl);
        //And initialize the slider
        sliderControl.startSlider();
    });
    </script>
</body>

</html>
	<!DOCTYPE html>
	<html>

	<head>
	<title>Leaflet Time Slider Example</title>
	<meta charset="utf-8" />

	<meta name="viewport" content="width=device-width, initial-scale=1.0">

	<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.7.2/leaflet.css" />
	<!--[if lte IE 8]><link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.5.1/leaflet.ie.css" /><![endif]-->
	<link rel="stylesheet" href="http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css" type="text/css">
	</head>

	<body>
	<div id="map" style="width: 100%; height: 600px"></div>

	<script src="http://cdn.leafletjs.com/leaflet-0.7.2/leaflet.js"></script>
	<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
	<script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>

	<!-- Include this library for mobile touch support -->
	<script src="//cdnjs.cloudflare.com/ajax/libs/jqueryui-touch-punch/0.2.2/jquery.ui.touch-punch.min.js"></script>


	<script src="SliderControl.js"></script>

	<script>
	var sliderControl = null;

	var myMap = L.map('map').setView([52.06, 7.40], 10);

	L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
	attribution: '© <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
	}).addTo(myMap);


	//Use usual LayerGroups instead of GeoJSON fetched markers
	/*
	var marker1 = L.marker([51.933292258, 7.582512743], {time: "2013-01-22 08:42:26+01"});
	var marker2 = L.marker([51.9, 7.6], {time: "2013-01-22 10:00:26+01"});
	var marker3 = L.marker([51.7, 7.7], {time: "2013-01-22 10:03:29+01"});

	var pointA = new L.LatLng(51.8, -0.09);
	var pointB = new L.LatLng(51.9, -0.2);
	var pointList = [pointA, pointB];

	var polyline = new L.Polyline(pointList, {
	time: "2013-01-22 10:24:59+01",
	color: 'red',
	weight: 3,
	opacity: 1,
	smoothFactor: 1
	});


	layerGroup = L.layerGroup([marker1, marker2, marker3, polyline]);
	var sliderControl = L.control.sliderControl({layer:layerGroup, follow: true});
	myMap.addControl(sliderControl);
	sliderControl.startSlider();
	*/


	//Fetch some data from a GeoJSON file
	$.getJSON("points.json", function(json) {
	var testlayer = L.geoJson(json),
	sliderControl = L.control.sliderControl({
	position: "topright",
	layer: testlayer
	});

	//For a Range-Slider use the range property:
	sliderControl = L.control.sliderControl({
	position: "topright",
	layer: testlayer,
	range: true
	});

	//Make sure to add the slider to the map ;-)
	myMap.addControl(sliderControl);
	//And initialize the slider
	sliderControl.startSlider();
	});
	</script>
	</body>

	</html>