diff --git a/folium/plugins/timeline.py b/folium/plugins/timeline.py
index b8b4cb8a8..6ff062eae 100644
--- a/folium/plugins/timeline.py
+++ b/folium/plugins/timeline.py
@@ -12,45 +12,39 @@ class Timeline(JSCSSMixin, MacroElement):
 
     _template = Template(
         """
+        {% macro header(this,kwargs) %}
+            <style>
+                .leaflet-bottom.leaflet-left {
+                    width: 100%;
+                }
+                .leaflet-control-container .leaflet-timeline-controls {
+                    box-sizing: border-box;
+                    width: 100%;
+                    margin: 0;
+                    margin-bottom: 15px;
+                }
+            </style>
+        {% endmacro %}
+
         {% macro script(this, kwargs) %}
+
             var {{ this.get_name() }} = L.timeline(
                 {{ this.data|tojson }},
                 {{ this.options|tojson }}
             );
-            {{ this._parent.get_name() }}.addControl({{ this.get_name() }});
-            {{ this.get_name() }}.addTo({{ this._parent.get_name() }});
-        {% endmacro %}
-    """
-    )
-
-    default_js = [
-        (
-            "timeline",
-            "https://skeate.dev/Leaflet.timeline/examples/leaflet.timeline.js",
-        )
-    ]
-
-    def __init__(self, data, **kwargs):
-        super().__init__()
-        self._name = "Timeline"
-
-        self.data = data
-        self.options = parse_options(**kwargs)
+            var control = L.timelineSliderControl({
+              formatOutput: function (date) {
+                return new Date(date).toLocaleDateString();
+              },
+              enableKeyboardControls: true,
+            });
+            control.addTo({{ this._parent.get_name() }});
 
+            {{ this._parent.get_name() }}.addControl(control);
+            {{ this.get_name() }}.addTo({{ this._parent.get_name() }});
 
-class TimelineSliderControl(JSCSSMixin, MacroElement):
-    """
-    TODO
-    """
+            control.addTimelines({{ this.get_name() }});
 
-    _template = Template(
-        """
-        {% macro script(this, kwargs) %}
-            var {{ this.get_name() }} = L.timelineSliderControl(
-                {{ this.options|tojson }}
-            );
-            {{ this.get_name() }}.addTimelines();
-            {{ this.get_name() }}.addTo({{ this._parent.get_name() }});
         {% endmacro %}
     """
     )
@@ -64,6 +58,7 @@ class TimelineSliderControl(JSCSSMixin, MacroElement):
 
     def __init__(self, data, **kwargs):
         super().__init__()
-        self._name = "TimelineSliderControl"
+        self._name = "Timeline"
 
+        self.data = data
         self.options = parse_options(**kwargs)