added meta tag, removed output element and updated code to limit value

w3c · Feb 16, 2021 · 96d161b · 96d161b
1 parent 8a1457d
commit 96d161b
Show file tree

Hide file tree

Showing 3 changed files with 18 additions and 25 deletions.
diff --git a/examples/slider/css/slider-thermostat.css b/examples/slider/css/slider-thermostat.css
@@ -6,11 +6,11 @@
   font-size: 150%;
 }
 
-.slider-thermostat-vertical {
+.slider-thermostat-vertical .slider-group {
   touch-action: pan-x;
 }
 
-.slider-thermostat-text {
+.slider-thermostat-text .slider-group {
   touch-action: pan-y;
 }
 
@@ -21,6 +21,10 @@
   width: 12em;
 }
 
+.slider-thermostat-text {
+  width: 14em;
+}
+
 .slider-thermostat-vertical label,
 .slider-thermostat-vertical .label,
 .slider-thermostat-text .label {
@@ -40,7 +44,7 @@
   height: 1.5em;
 }
 
-.slider-thermostat-vertical output {
+.slider-thermostat-vertical .temp-value {
   padding-left: 24px;
   font-weight: bold;
   font-size: 200%;

diff --git a/examples/slider/js/slider-thermostat.js b/examples/slider/js/slider-thermostat.js
@@ -34,7 +34,7 @@ class SliderThermostatVertical {
 
     // The input elements are optional to support mobile devices,
     // when a keyboard is not present
-    this.outputNode = domNode.querySelector('.output-value output');
+    this.valueNode = domNode.querySelector('.temp-value');
 
     // Dimensions of the slider focus ring, thumb and rail
 
@@ -124,7 +124,7 @@ class SliderThermostatVertical {
 
     let valueText = value.toFixed(1) + this.labelCelsius;
 
-    this.outputNode.value = valueOutput;
+    this.valueNode.textContent = valueOutput;
     this.sliderNode.setAttribute('aria-valuenow', value.toFixed(1));
     this.sliderNode.setAttribute('aria-valuetext', valueText);
 
@@ -333,7 +333,8 @@ class SliderThermostatText {
       buttonNode.addEventListener('blur', this.onSliderBlur.bind(this));
 
       let width = buttonNode.getBoundingClientRect().width;
-      buttonNode.style.left = position - width / 2 + 'px';
+      let left = position - width / 2 + 'px';
+      buttonNode.style.left = left;
 
       this.positions.push(position);
       position += deltaPosition;
@@ -373,13 +374,7 @@ class SliderThermostatText {
     valueMin = this.getValueMin();
     valueMax = this.getValueMax();
 
-    if (value > valueMax) {
-      value = valueMax;
-    }
-
-    if (value < valueMin) {
-      value = valueMin;
-    }
+    value = Math.min(Math.max(value, valueMin), valueMax);
 
     this.sliderNode.setAttribute('aria-valuenow', value);
     this.sliderNode.setAttribute('aria-valuetext', this.textValues[value]);

diff --git a/examples/slider/slider-thermostat.html b/examples/slider/slider-thermostat.html
@@ -2,6 +2,7 @@
 <html lang="en">
 <head>
   <meta charset="utf-8" />
+
   <title>Slider Examples with aria-orientation and aria-valuetext | WAI-ARIA Authoring Practices 1.2</title>
 
   <!--  Core js and css shared by all examples; do not modify when using this template. -->
@@ -50,15 +51,8 @@ <h2 id="ex_label">Example</h2>
         <div class="slider-thermostat" role="group" aria-labelledby="id-therm-label">
           <h3 id="id-therm-label">Thermostat</h3>
           <div class="slider-thermostat-vertical">
-            <div class="output-value">
-              <label id="id-temp-label"
-                for="id-temp-output">
-                Temperature
-              </label>
-              <output
-                id="id-temp-output"
-                for="id-temp-slider">25°C</output>
-            </div>
+            <div id="id-temp-label" class="label">Temperature</div>
+            <div class="temp-value">25°C</div>
             <svg class="slider-group"  width="145" height="340">
               <rect class="rail" x="60" y="20" width="8" height="300" rx="5"  aria-hidden="true"/>
               <g role="slider"
@@ -81,8 +75,8 @@ <h3 id="id-therm-label">Thermostat</h3>
 
           <div class="slider-thermostat-text">
             <div id="id-fan-label" class="label">Fan</div>
-            <svg class="slider-group" width="210" height="105">
-              <rect class="rail" x="35" y="35" width="132" height="8" rx="5" aria-hidden="true"/>
+            <svg class="slider-group" width="230" height="105">
+              <rect class="rail" x="35" y="35" width="160" height="8" rx="5" aria-hidden="true"/>
               <g id="id-fan"
                 role="slider"
                 aria-orientation="horizontal"
@@ -133,7 +127,7 @@ <h3 id="id-therm-label">Thermostat</h3>
           <div class="slider-thermostat-text">
             <div id="id-hc-label" class="label">Heat/Cool</div>
             <svg class="slider-group" width="210" height="105">
-              <rect class="rail" x="35" y="35" width="92" height="8" rx="5" aria-hidden="true"/>
+              <rect class="rail" x="35" y="35" width="110" height="8" rx="5" aria-hidden="true"/>
               <g role="slider"
                 aria-orientation="horizontal"
                 id="id-hc"