html Änderung

data/index.html

 
   <div class="ueberschrift">
     Helligkeit
-      <!--<label id="label_pwm">
+    <!--<label id="label_pwm">
       </label>-->
       <div class="slider">
-        <input type="range" class="regler" value="50" min="1" max="100"
-          oninput="this.nextElementSibling.value = this.value">
-
-        <output>50</output>
+        <input type="range" class="regler" id="helligkeit" name="rangeInput" min="0" max="100" value="50"
+          oninput="amount1.value=helligkeit.value">
+        <br>
+        <output name="amount1" id="amount1" for="helligkeit">50</output>
       </div>
-    </div>
+  </div>
   <div class="ueberschrift">
     Helligkeit bei Dunkelheit
-      <!--<label id="label_pwm_dark">
+    <!--<label id="label_pwm_dark">
       </label>-->
       <div class="slider">
-      <input type="range" class="regler" value="50" min="1" max="100"
-        oninput="this.nextElementSibling.value = this.value">
-      <output>50</output>
-    </div>
+        <input type="range" class="regler" id="helligkeit_dunkel" name="rangeInput" min="0" max="100" value="50"
+          oninput="amount2.value=helligkeit_dunkel.value">
+        <br>
+        <output name="amount2" id="amount2" for="helligkeit_dunkel">50</output>
+      </div>
   </div>
 
-    <div class="ueberschrift">
-      Laufgeschwindigkeit
-        <!--<label id="label_geschwindigkeit">
+  <div class="ueberschrift">
+    Laufgeschwindigkeit
+    <!--<label id="label_geschwindigkeit">
       </label>-->
-        <div class="slider">
-          <input type="range" class="regler" value="50" min="1" max="100"
-            oninput="this.nextElementSibling.value = this.value">
-          <output>50</output>
-        </div>
-    </div>
+          <div class="slider">
+            <input type="range" class="regler" id="geschwindigkeit" name="rangeInput" min="0" max="100" value="50"
+              oninput="amount3.value=geschwindigkeit.value">
+            <br>
+            <output name="amount3" id="amount3" for="geschwindigkeit">50</output>
+          </div>
+  </div>
 
-    <div class="ueberschrift">
-      Licht-An-Zeit
-       <!--  <label id="label_time">
+  <div class="ueberschrift">
+    Licht-An-Zeit
+    <!--  <label id="label_time">
         </label>-->
         <div class="slider">
-          <input type="range" class="regler" value="50" min="1" max="100"
-            oninput="this.nextElementSibling.value = this.value">
-          <output>50</output>
+          <input type="range" class="regler" id="time" name="rangeInput" min="0" max="100" value="50"
+            oninput="amount4.value=time.value">
+          <br>
+          <output name="amount4" id="amount4" for="time">50</output>
         </div>
-    </div>
+  </div>
 
 
 </body>

data/style.css

 }
 
 .regler{
+  position: fixed;
+  left: 0;
   -webkit-appearance: none;
   height: 30px;
-  width: 98%;
+  width: 100%;
   border-radius: 20px;
   outline: black;
   background-color: rgb(176, 188, 228);