Color Viewer Slider Example Update (slider-1)

examples/index.html

@@ -134,6 +134,7 @@ <h2 id="examples_by_role_label">Examples by Role</h2>
                 <li><a href="carousel/carousel-1-prev-next.html">Auto-Rotating Image Carousel  with Buttons for Slide Control</a></li>
                 <li><a href="checkbox/checkbox-1/checkbox-1.html">Checkbox  (Two State)</a></li>
                 <li><a href="menubar/menubar-editor.html">Editor Menubar</a></li>
+                <li><a href="slider/slider-color-viewer.html">Color Viewer Slider</a></li>
                 <li><a href="spinbutton/datepicker-spinbuttons.html">Date Picker Spin Button</a></li>
                 <li><a href="treeview/treeview-2/treeview-2a.html">Navigation Treeview  Using Computed Properties</a></li>
                 <li><a href="treeview/treeview-2/treeview-2b.html">Navigation Treeview  Using Declared Properties</a></li>
@@ -285,8 +286,8 @@ <h2 id="examples_by_role_label">Examples by Role</h2>
             <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-color-viewer.html">Color Viewer Slider</a></li>
               </ul>
             </td>
           </tr>
@@ -563,6 +564,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-color-viewer.html">Color Viewer Slider</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>
@@ -599,6 +601,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-color-viewer.html">Color Viewer Slider</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>
@@ -741,8 +744,8 @@ <h2 id="examples_by_props_label">Examples By Properties and States</h2>
               <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-color-viewer.html">Color Viewer Slider</a></li>
                 <li><a href="spinbutton/datepicker-spinbuttons.html">Date Picker Spin Button</a></li>
               </ul>
             </td>
@@ -753,8 +756,8 @@ <h2 id="examples_by_props_label">Examples By Properties and States</h2>
               <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-color-viewer.html">Color Viewer 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>
@@ -766,8 +769,8 @@ <h2 id="examples_by_props_label">Examples By Properties and States</h2>
               <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-color-viewer.html">Color Viewer 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-color-viewer.css

@@ -0,0 +1,165 @@
+/* CSS Document */
+
+.color-viewer-sliders label {
+  display: block;
+}
+
+.color-box-sliders .label {
+  margin-top: 0;
+  margin-bottom: 1 em;
+}
+
+.color-viewer-sliders .color-box {
+  width: 200px;
+  height: 200px;
+  border: black solid medium;
+  text-align: center;
+  padding: 0.25em;
+  forced-color-adjust: none;
+}
+
+.color-viewer-sliders .color-info {
+  padding-top: 5px;
+}
+
+.color-viewer-sliders .color-info label {
+  margin-top: 0.25em;
+  display: block;
+}
+
+.color-group {
+  padding: 4px;
+  width: 490px;
+}
+
+.color-group.focus {
+  color: #005a9c;
+}
+
+.color-group > button,
+.color-group > div {
+  display: inline;
+}
+
+.color-group .value {
+  color: currentColor;
+  fill: currentColor;
+}
+
+.color-group.focus .color-slider .value,
+.color-group .color-slider:focus .value,
+.color-group .color-slider:hover .value {
+  font-weight: bold;
+}
+
+.color-group .color-slider {
+  margin: 0;
+  padding: 0;
+}
+
+.color-group .color-slider .valueBackground {
+  fill: white;
+  stroke-width: 0;
+}
+
+.color-group .color-slider .rail {
+  fill: #bbb;
+  stroke: currentColor;
+  stroke-width: 2px;
+  opacity: 0.8;
+}
+
+.color-group .color-slider .fill {
+  stroke-width: 0;
+  opacity: 0.5;
+  pointer-events: none;
+}
+
+.color-group.green .color-slider .fill {
+  fill: green;
+}
+
+.color-group.red .color-slider .fill {
+  fill: red;
+}
+
+.color-group.blue .color-slider .fill {
+  fill: blue;
+}
+
+.color-group .color-slider .thumb {
+  fill: #666;
+  stroke: currentColor;
+  stroke-width: 2px;
+}
+
+.color-group .color-slider .focus {
+  fill: transparent;
+  stroke: transparent;
+  stroke-width: 2px;
+}
+
+.color-group.focus .color-slider .fill,
+.color-group .color-slider:focus .fill,
+.color-group .color-slider:hover .fill {
+  opacity: 1;
+}
+
+.color-group.focus .color-slider .rail,
+.color-group .color-slider:focus .rail,
+.color-group .color-slider:hover .rail {
+  fill: transparent;
+  stroke: currentColor;
+  opacity: 1;
+}
+
+.color-group .color-slider:focus .thumb,
+.color-group .color-slider:hover .thumb {
+  fill: #ddd;
+  stroke: currentColor;
+  opacity: 1;
+}
+
+.color-group .color-slider:focus .focus,
+.color-group .color-slider:hover .focus {
+  stroke: currentColor;
+}
+
+.color-group button.dec10,
+.color-group button.dec,
+.color-group button.inc,
+.color-group button.inc10 {
+  padding: 0;
+  margin: 0;
+  border: none;
+  background: none;
+  color: currentColor;
+}
+
+.color-group button .focus {
+  stroke: transparent;
+  stroke-width: 2px;
+  fill: transparent;
+}
+
+.color-group button line,
+.color-group button .background {
+  fill: transparent;
+  stroke: currentColor;
+  stroke-width: 2px;
+}
+
+.color-group button line {
+  stroke: currentColor;
+  stroke-width: 2px;
+}
+
+.color-group button:focus,
+.color-group .color-slider:focus {
+  outline: none;
+}
+
+.color-group button:focus .focus,
+.color-group button:hover .focus {
+  stroke: currentColor;
+}