Html Änderung

data/index.html

@@ -14,39 +14,47 @@
   </div>
 
   <div class="ueberschrift">
-    <center>Helligkeit</center>
-    <div class="slider">
-      <label id="label_pwm">
-      </label>
-      <input type="range" class="testregler" min="0" max="100">
+    Helligkeit
+      <!--<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>
+      </div>
     </div>
-  </div>
   <div class="ueberschrift">
-    <center>Helligkeit bei Dunkelheit</center>
-    <div class="slider">
-      <label id="label_geschwindigkeit">
-      </label>
-      <input type="range" class="testregler" min="0" max="100">
+    Helligkeit bei Dunkelheit
+      <!--<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>
-  <br>
-  <div class="ueberschrift">
-    <center>Laufgeschwindigkeit</center>
-    <div class="slider">
-      <label id="label_geschwindigkeit">
-      </label>
-      <input type="range" class="testregler" min="0" max="100">
+
+    <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>
-  <br>
-  <div class="ueberschrift">
-    <center>Licht-An-Zeit</center>
-    <div class="slider">
-      <label id="label_geschwindigkeit">
-      </label>
-      <input type="range" class="testregler" min="0" max="100">
+
+    <div class="ueberschrift">
+      Licht-An-Zeit
+       <!--  <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>
 
 
 </body>

data/style.css

@@ -20,11 +20,13 @@ html {
 .ueberschrift{
   color: #ffffff;
   font-size: 50px;
-  width: 40%;
+  width: 100%;
   background-color: #5f5f5f;
+  opacity: 0.2;
+  text-align: center;
 }
 
-.testregler{
+.regler{
   -webkit-appearance: none;
   height: 30px;
   width: 98%;
@@ -32,7 +34,7 @@ html {
   outline: black;
   background-color: rgb(176, 188, 228);
 }
-.testregler::-webkit-slider-thumb{
+.regler::-webkit-slider-thumb{
   -webkit-appearance: none;
   appearance: none;
   width: 5%;