Style the date slider

spatial/static/spatial/js/slidingMap.js

@@ -96,36 +96,8 @@ async function initSlidingMap(lonLat, zoomLevel, mapAttribution) {
     range.value = todayLayerIndex;
     setCurrentDate(todayLayerIndex);
     
-    //range.oninput();
-    /*
-    console.info("WWW" + todayLayerIndex.valueOf());
-    document.getElementById("layerDateRange").value = todayLayerIndex; // TODO: Today
-    //document.getElementById("layerDateRange").value = "8";
-    console.info(document.getElementById("layerDateRange").value);
-    document.getElementById("layerDateRange").max = timestamps.length -1;
-*/
-    //console.info(timestamps);
-    /*
-    for(let i=2;i<=6;i++)
-    {
-        layers.push(
-            new ol.layer.Image({
-                source: new ol.source.ImageWMS({
-                    url: 'https://testvips.nibio.no/cgi-bin/SEPTREFHUM',
-                    params: { 'LAYERS': 'SEPTREFHUM.WARNING_STATUS 2023-10-0' + i, 'TRANSPARENT': 'TRUE' },
-                    serverType: 'mapserver',
-                    ratio: 1,
-                    projection: ol.proj.get('EPSG:25833')
-                }),
-                visible: (i==2),
-                opacity: 0.5
-            })
-        );
-    }*/
-
     
 
-
 	// Creating the map
 	map = new ol.Map({
 		target: "mapContainer",

spatial/templates/spatial/slidingMap.html

@@ -25,10 +25,12 @@
 
 {% block content %}
 		<!-- Start map container -->
-		<div class="col-md-12" id="mapContainer" />
-        <div class="slidecontainer">
-            Current date: <span id="currentDate"></span> <br/>
-            <input type="range" min="0" max="0" value="3" step="1" id="layerDateRange" onchange="switchLayer(parseInt(this.value));"><br/>
-            
-          </div>
+		<div class="col-md-12" id="mapContainer" style="position: relative; height: 800px;">
+            <div class="slidecontainer" style="position: absolute; left: 20px; bottom: 20px; background-color: white; z-index: 1000;padding: 15px; border-radius: 15px;">
+                Current date: <span id="currentDate"></span> <br/>
+                <input type="range" min="0" max="0" value="0" step="1" id="layerDateRange" onchange="switchLayer(parseInt(this.value));"><br/>
+                
+              </div>
+        </div>
+       
 {% endblock %}
\ No newline at end of file