Slider: Updated multithumb slider based on slider focus group meeting

examples/index.html

@@ -298,9 +298,9 @@ <h2 id="examples_by_role_label">Examples by Role</h2>
             <td><code>slider</code></td>
             <td>
               <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-multithumb.html">Horizontal Multi-Thumb Slider</a></li>
               </ul>
             </td>
           </tr>
@@ -755,9 +755,9 @@ <h2 id="examples_by_props_label">Examples By Properties and States</h2>
             <td>
               <ul>
                 <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-multithumb.html">Horizontal Multi-Thumb Slider</a></li>
                 <li><a href="spinbutton/datepicker-spinbuttons.html">Date Picker Spin Button</a></li>
               </ul>
             </td>
@@ -767,9 +767,9 @@ <h2 id="examples_by_props_label">Examples By Properties and States</h2>
             <td>
               <ul>
                 <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-multithumb.html">Horizontal Multi-Thumb Slider</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>
@@ -780,9 +780,9 @@ <h2 id="examples_by_props_label">Examples By Properties and States</h2>
             <td>
               <ul>
                 <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-multithumb.html">Horizontal Multi-Thumb Slider</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>
@@ -792,8 +792,8 @@ <h2 id="examples_by_props_label">Examples By Properties and States</h2>
             <td><code>aria-valuetext</code></td>
             <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-multithumb.html">Horizontal Multi-Thumb Slider</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-multithumb.css

@@ -0,0 +1,76 @@
+/* CSS Document */
+
+.slider-multithumb {
+  padding: 6px;
+  width: 350px;
+  touch-action: pan-y;
+}
+
+.slider-multithumb .slider-group {
+  color: #005a9c;
+}
+
+.slider-multithumb .slider-group .value {
+  font-size: 80%;
+  color: currentColor;
+  fill: currentColor;
+}
+
+.slider-multithumb .slider-group .rail {
+  stroke: currentColor;
+  stroke-width: 2px;
+  fill: transparent;
+  opacity: 0.6;
+}
+
+.slider-multithumb .slider-group .range {
+  fill: currentColor;
+  opacity: 0.5;
+}
+
+.slider-multithumb .slider-group .thumb {
+  stroke: transparent;
+  stroke-width: 2px;
+  fill: currentColor;
+}
+
+.slider-multithumb .slider-group .focus-ring {
+  stroke-width: 3px;
+  stroke: transparent;
+  fill: transparent;
+  stroke-linecap: round;
+  stroke-linejoin: round;
+}
+
+/* Focus and hover styling */
+
+.slider-multithumb .slider-group g.rail,
+.slider-multithumb .slider-group g.focus {
+  color: black;
+}
+
+.slider-multithumb .slider-group.active g.rail {
+  opacity: 0.8;
+}
+
+.slider-multithumb .slider-group.active g.range {
+  fill: currentColor;
+}
+
+.slider-multithumb [role="slider"]:focus {
+  outline: none;
+}
+
+.slider-multithumb [role="slider"]:hover .focus-ring,
+.slider-multithumb [role="slider"]:focus .focus-ring {
+  stroke: currentColor;
+}
+
+.slider-multithumb [role="slider"]:focus .thumb {
+  stroke: currentColor;
+}
+
+.slider-multithumb [role="slider"]:focus .value {
+  color: currentColor;
+  font-weight: bold;
+}