slider

frontend/src/components/weather/weatherForecastData.js

@@ -7,6 +7,13 @@ const WeatherForecastData = (props) => {
   const [data, setData] = useState([]);
   const [weatherdata, setweatherData] = useState([]);
 
+  const [sliderValue, setSliderValue] = useState(1);
+
+  // Handler-Funktion, um den Wert des Schiebereglers zu aktualisieren
+  const handleSliderChange = (event) => {
+    setSliderValue(event.target.value);
+  };
+
   const handleInputChange = (e) => {
     setQuery(e.target.value);
     if (e.target.value.trim() !== "") {
@@ -421,7 +428,16 @@ const WeatherForecastData = (props) => {
             <h3>How many forecast days do you want?</h3>
           </div>
           <label for="days"></label>
-          <input type="range" id="days" name="days" min="1" max="7" />
+          <input
+            type="range"
+            id="days"
+            name="days"
+            min="1"
+            max="7"
+            value={sliderValue}
+            onChange={handleSliderChange}
+          />
+          <span>{sliderValue}</span>
         </div>
         <div class="fw1">
           <div class="h3">