Updated thermostat slider example (slider-2)

examples/index.html

@@ -300,7 +300,7 @@ <h2 id="examples_by_role_label">Examples by Role</h2>
               <ul>
                 <li><a href="slider/multithumb-slider.html">Horizontal Multi-Thumb Slider</a></li>
                 <li><a href="slider/slider-1.html">Horizontal Slider</a></li>
-                <li><a href="slider/slider-2.html">Slider  with aria-orientation and aria-valuetext</a></li>
+                <li><a href="slider/slider-thermostat.html">Slider  with aria-orientation and aria-valuetext</a></li>
               </ul>
             </td>
           </tr>
@@ -457,6 +457,7 @@ <h2 id="examples_by_props_label">Examples By Properties and States</h2>
                 <li><a href="menu-button/menu-button-actions-active-descendant.html">Actions Menu Button  Using aria-activedescendant</a></li>
                 <li><a href="menu-button/menu-button-actions.html">Actions Menu Button  Using element.focus()</a></li>
                 <li><a href="menu-button/menu-button-links.html">Navigation Menu Button</a></li>
+                <li><a href="slider/slider-thermostat.html">Slider  with aria-orientation and aria-valuetext</a></li>
                 <li><a href="tabs/tabs-1/tabs.html">Tabs with Automatic Activation</a></li>
                 <li><a href="tabs/tabs-2/tabs.html">Tabs with Manual Activation</a></li>
                 <li><a href="toolbar/toolbar.html">Toolbar</a></li>
@@ -544,6 +545,7 @@ <h2 id="examples_by_props_label">Examples By Properties and States</h2>
             <td>
               <ul>
                 <li><a href="dialog-modal/alertdialog.html">Alert Dialog</a></li>
+                <li><a href="slider/slider-thermostat.html">Slider  with aria-orientation and aria-valuetext</a></li>
                 <li><a href="spinbutton/datepicker-spinbuttons.html">Date Picker Spin Button</a></li>
                 <li><a href="toolbar/toolbar.html">Toolbar</a></li>
               </ul>
@@ -579,6 +581,7 @@ <h2 id="examples_by_props_label">Examples By Properties and States</h2>
                 <li><a href="menubar/menubar-navigation.html">Navigation Menubar</a></li>
                 <li><a href="radio/radio-activedescendant.html">Radio Group  Using aria-activedescendant</a></li>
                 <li><a href="radio/radio.html">Radio Group  Using Roving tabindex</a></li>
+                <li><a href="slider/slider-thermostat.html">Slider  with aria-orientation and aria-valuetext</a></li>
                 <li><a href="spinbutton/datepicker-spinbuttons.html">Date Picker Spin Button</a></li>
                 <li><a href="table/table.html">Table</a></li>
                 <li><a href="tabs/tabs-1/tabs.html">Tabs with Automatic Activation</a></li>
@@ -614,6 +617,7 @@ <h2 id="examples_by_props_label">Examples By Properties and States</h2>
                 <li><a href="menu-button/menu-button-links.html">Navigation Menu Button</a></li>
                 <li><a href="radio/radio-activedescendant.html">Radio Group  Using aria-activedescendant</a></li>
                 <li><a href="radio/radio.html">Radio Group  Using Roving tabindex</a></li>
+                <li><a href="slider/slider-thermostat.html">Slider  with aria-orientation and aria-valuetext</a></li>
                 <li><a href="spinbutton/datepicker-spinbuttons.html">Date Picker Spin Button</a></li>
                 <li><a href="tabs/tabs-1/tabs.html">Tabs with Automatic Activation</a></li>
                 <li><a href="tabs/tabs-2/tabs.html">Tabs with Manual Activation</a></li>
@@ -667,7 +671,7 @@ <h2 id="examples_by_props_label">Examples By Properties and States</h2>
           </tr>
           <tr>
             <td><code>aria-orientation</code></td>
-            <td><a href="slider/slider-2.html">Slider  with aria-orientation and aria-valuetext</a></td>
+            <td><a href="slider/slider-thermostat.html">Slider  with aria-orientation and aria-valuetext</a></td>
           </tr>
           <tr>
             <td><code>aria-owns</code></td>
@@ -757,7 +761,7 @@ <h2 id="examples_by_props_label">Examples By Properties and States</h2>
                 <li><a href="meter/meter.html">Meter</a></li>
                 <li><a href="slider/multithumb-slider.html">Horizontal Multi-Thumb Slider</a></li>
                 <li><a href="slider/slider-1.html">Horizontal Slider</a></li>
-                <li><a href="slider/slider-2.html">Slider  with aria-orientation and aria-valuetext</a></li>
+                <li><a href="slider/slider-thermostat.html">Slider  with aria-orientation and aria-valuetext</a></li>
                 <li><a href="spinbutton/datepicker-spinbuttons.html">Date Picker Spin Button</a></li>
               </ul>
             </td>
@@ -769,7 +773,7 @@ <h2 id="examples_by_props_label">Examples By Properties and States</h2>
                 <li><a href="meter/meter.html">Meter</a></li>
                 <li><a href="slider/multithumb-slider.html">Horizontal Multi-Thumb Slider</a></li>
                 <li><a href="slider/slider-1.html">Horizontal Slider</a></li>
-                <li><a href="slider/slider-2.html">Slider  with aria-orientation and aria-valuetext</a></li>
+                <li><a href="slider/slider-thermostat.html">Slider  with aria-orientation and aria-valuetext</a></li>
                 <li><a href="spinbutton/datepicker-spinbuttons.html">Date Picker Spin Button</a></li>
                 <li><a href="toolbar/toolbar.html">Toolbar</a></li>
               </ul>
@@ -782,7 +786,7 @@ <h2 id="examples_by_props_label">Examples By Properties and States</h2>
                 <li><a href="meter/meter.html">Meter</a></li>
                 <li><a href="slider/multithumb-slider.html">Horizontal Multi-Thumb Slider</a></li>
                 <li><a href="slider/slider-1.html">Horizontal Slider</a></li>
-                <li><a href="slider/slider-2.html">Slider  with aria-orientation and aria-valuetext</a></li>
+                <li><a href="slider/slider-thermostat.html">Slider  with aria-orientation and aria-valuetext</a></li>
                 <li><a href="spinbutton/datepicker-spinbuttons.html">Date Picker Spin Button</a></li>
                 <li><a href="toolbar/toolbar.html">Toolbar</a></li>
               </ul>
@@ -793,7 +797,7 @@ <h2 id="examples_by_props_label">Examples By Properties and States</h2>
             <td>
               <ul>
                 <li><a href="slider/multithumb-slider.html">Horizontal Multi-Thumb Slider</a></li>
-                <li><a href="slider/slider-2.html">Slider  with aria-orientation and aria-valuetext</a></li>
+                <li><a href="slider/slider-thermostat.html">Slider  with aria-orientation and aria-valuetext</a></li>
                 <li><a href="spinbutton/datepicker-spinbuttons.html">Date Picker Spin Button</a></li>
                 <li><a href="toolbar/toolbar.html">Toolbar</a></li>
               </ul>

examples/slider/css/slider-thermostat.css

@@ -0,0 +1,122 @@
+/* CSS Document */
+
+/* CSS Document */
+
+.slider-multithumb {
+  padding: 6px;
+  width: 550px;
+}
+
+.slider-thermostat-vertical,
+.slider-thermostat-text {
+  margin-top: 1em;
+  padding: 6px;
+  width: 12em;
+}
+
+.slider-thermostat-vertical .label,
+.slider-thermostat-text .label {
+  font-weight: bold;
+}
+
+.slider-thermostat-vertical.focus,
+.slider-thermostat-text.focus {
+  padding: 4px;
+  border: 2px solid #005a9c;
+  border-radius: 5px;
+}
+
+.slider-thermostat-vertical .value {
+  margin: 0.5em;
+  position: relative;
+  top: 20px;
+  height: 1.5em;
+}
+
+.slider-thermostat-vertical .input-value {
+  padding-left: 38px;
+}
+
+.slider-thermostat-vertical .input-value input {
+  width: 4em;
+}
+
+.slider-thermostat-vertical .slider-group .value {
+  font-size: 80%;
+  fill: currentColor;
+}
+
+.slider-thermostat-vertical .slider-group .rail,
+.slider-thermostat-text .slider-group .rail {
+  stroke: currentColor;
+  stroke-width: 2px;
+  fill: currentColor;
+  fill-opacity: 25%;
+}
+
+.slider-thermostat-vertical .slider-group .thumb,
+.slider-thermostat-text .slider-group .thumb {
+  stroke-width: 0;
+  fill: currentColor;
+}
+
+.slider-thermostat-vertical .slider-group .focus,
+.slider-thermostat-text .slider-group .focus {
+  stroke-width: 3px;
+  stroke: transparent;
+  fill: transparent;
+}
+
+.slider-thermostat-text .labels {
+  position: relative;
+}
+
+.slider-thermostat-text .labels button {
+  position: absolute;
+  top: -30px;
+  margin: 2px;
+  padding: 6px;
+  border: none;
+  background: transparent;
+  display: inline-block;
+  font-size: 1em;
+}
+
+/* Focus and hover styling */
+
+.slider-thermostat-text .labels button:hover {
+  padding: 4px;
+  border: 2px #005a9c solid;
+  border-radius: 5px;
+}
+
+.slider-thermostat-vertical.focus .slider-group,
+.slider-thermostat-text.focus .slider-group {
+  color: #005a9c;
+}
+
+.slider-thermostat-vertical.focus .slider-group .rail,
+.slider-thermostat-text.focus .slider-group .rail {
+  stroke: currentColor;
+  fill: #adddff;
+}
+
+.slider-thermostat-vertical [role="slider"]:focus,
+.slider-thermostat-text [role="slider"]:focus {
+  outline: none;
+}
+
+.slider-thermostat-vertical [role="slider"]:focus .focus,
+.slider-thermostat-text [role="slider"]:focus .focus {
+  stroke: currentColor;
+}
+
+.slider-thermostat-vertical [role="slider"]:focus .thumb,
+.slider-thermostat-text [role="slider"]:focus .thumb {
+  fill: currentColor;
+}
+
+.slider-thermostat-vertical [role="slider"]:focus .value {
+  font-weight: bold;
+  fill: currentColor;
+}