Slider: Media Seek Slider example

aria-practices.html

@@ -2364,6 +2364,7 @@ <h4>Examples</h4>
           <li><a href="examples/slider/slider-color-viewer.html">Color Viewer Slider Example</a>: Basic  horizontal sliders that illustrate setting numeric values for a color picker.</li>
           <li><a href="examples/slider/slider-temperature.html">Temperature Selector Slider Example</a>: Demonstrates using <code>aria-orientation</code> to specify vertical orientation and <code>aria-valuetext</code> to communicate unit of measure for a temperature input.</li>
           <li><a href="examples/slider/slider-rating.html">Rating Slider Example</a>: Horizontal slider that demonstrates using <code>aria-valuetext</code> to communicate current and maximum value of a rating input for a five star rating scale.</li>
+          <li><a href="examples/slider/slider-seek.html">Media Seek Slider Example</a>: Horizontal slider that demonstrates using <code>aria-valuetext</code> to communicate current and maximum values of time in media to make the values easy to understand for assistive technology users by converting the total number of seconds to minutes and seconds.</li>
         </ul>
       </section>
 

examples/index.html

@@ -262,6 +262,7 @@ <h2 id="examples_by_role_label">Examples by Role</h2>
               <ul>
                 <li><a href="menu-button/menu-button-links.html">Navigation Menu Button</a> (<abbr title="High Contrast Support">HC</abbr>)</li>
                 <li><a href="menubar/menubar-navigation.html">Navigation Menubar</a> (<abbr title="High Contrast Support">HC</abbr>)</li>
+                <li><a href="slider/slider-seek.html">Media Seek Slider  with aria-valuetext</a> (<abbr title="High Contrast Support">HC</abbr>)</li>
                 <li><a href="slider/slider-temperature.html">Vertical Temperature Slider</a> (<abbr title="High Contrast Support">HC</abbr>)</li>
                 <li><a href="treeview/treeview-navigation.html">Navigation Treeview</a> (<abbr title="High Contrast Support">HC</abbr>)</li>
               </ul>
@@ -345,6 +346,7 @@ <h2 id="examples_by_role_label">Examples by Role</h2>
                 <li><a href="slider/multithumb-slider.html">Horizontal Multi-Thumb Slider</a></li>
                 <li><a href="slider/slider-color-viewer.html">Color Viewer Slider</a> (<abbr title="High Contrast Support">HC</abbr>)</li>
                 <li><a href="slider/slider-rating.html">Rating Slider</a> (<abbr title="High Contrast Support">HC</abbr>)</li>
+                <li><a href="slider/slider-seek.html">Media Seek Slider  with aria-valuetext</a> (<abbr title="High Contrast Support">HC</abbr>)</li>
                 <li><a href="slider/slider-temperature.html">Vertical Temperature Slider</a> (<abbr title="High Contrast Support">HC</abbr>)</li>
               </ul>
             </td>
@@ -605,6 +607,7 @@ <h2 id="examples_by_props_label">Examples By Properties and States</h2>
                 <li><a href="button/button_idl.html">Button  (IDL Version)</a></li>
                 <li><a href="slider/slider-color-viewer.html">Color Viewer Slider</a> (<abbr title="High Contrast Support">HC</abbr>)</li>
                 <li><a href="slider/slider-rating.html">Rating Slider</a> (<abbr title="High Contrast Support">HC</abbr>)</li>
+                <li><a href="slider/slider-seek.html">Media Seek Slider  with aria-valuetext</a> (<abbr title="High Contrast Support">HC</abbr>)</li>
                 <li><a href="slider/slider-temperature.html">Vertical Temperature Slider</a> (<abbr title="High Contrast Support">HC</abbr>)</li>
                 <li><a href="spinbutton/datepicker-spinbuttons.html">Date Picker Spin Button</a></li>
                 <li><a href="toolbar/toolbar.html">Toolbar</a></li>
@@ -663,6 +666,7 @@ <h2 id="examples_by_props_label">Examples By Properties and States</h2>
                 <li><a href="radio/radio.html">Radio Group  Using Roving tabindex</a> (<abbr title="High Contrast Support">HC</abbr>)</li>
                 <li><a href="slider/slider-color-viewer.html">Color Viewer Slider</a> (<abbr title="High Contrast Support">HC</abbr>)</li>
                 <li><a href="slider/slider-rating.html">Rating Slider</a> (<abbr title="High Contrast Support">HC</abbr>)</li>
+                <li><a href="slider/slider-seek.html">Media Seek Slider  with aria-valuetext</a> (<abbr title="High Contrast Support">HC</abbr>)</li>
                 <li><a href="slider/slider-temperature.html">Vertical Temperature Slider</a> (<abbr title="High Contrast Support">HC</abbr>)</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>
@@ -813,6 +817,7 @@ <h2 id="examples_by_props_label">Examples By Properties and States</h2>
                 <li><a href="slider/multithumb-slider.html">Horizontal Multi-Thumb Slider</a></li>
                 <li><a href="slider/slider-color-viewer.html">Color Viewer Slider</a> (<abbr title="High Contrast Support">HC</abbr>)</li>
                 <li><a href="slider/slider-rating.html">Rating Slider</a> (<abbr title="High Contrast Support">HC</abbr>)</li>
+                <li><a href="slider/slider-seek.html">Media Seek Slider  with aria-valuetext</a> (<abbr title="High Contrast Support">HC</abbr>)</li>
                 <li><a href="slider/slider-temperature.html">Vertical Temperature Slider</a> (<abbr title="High Contrast Support">HC</abbr>)</li>
                 <li><a href="spinbutton/datepicker-spinbuttons.html">Date Picker Spin Button</a></li>
                 <li><a href="toolbar/toolbar.html">Toolbar</a></li>
@@ -827,6 +832,7 @@ <h2 id="examples_by_props_label">Examples By Properties and States</h2>
                 <li><a href="slider/multithumb-slider.html">Horizontal Multi-Thumb Slider</a></li>
                 <li><a href="slider/slider-color-viewer.html">Color Viewer Slider</a> (<abbr title="High Contrast Support">HC</abbr>)</li>
                 <li><a href="slider/slider-rating.html">Rating Slider</a> (<abbr title="High Contrast Support">HC</abbr>)</li>
+                <li><a href="slider/slider-seek.html">Media Seek Slider  with aria-valuetext</a> (<abbr title="High Contrast Support">HC</abbr>)</li>
                 <li><a href="slider/slider-temperature.html">Vertical Temperature Slider</a> (<abbr title="High Contrast Support">HC</abbr>)</li>
                 <li><a href="spinbutton/datepicker-spinbuttons.html">Date Picker Spin Button</a></li>
                 <li><a href="toolbar/toolbar.html">Toolbar</a></li>
@@ -841,6 +847,7 @@ <h2 id="examples_by_props_label">Examples By Properties and States</h2>
                 <li><a href="slider/multithumb-slider.html">Horizontal Multi-Thumb Slider</a></li>
                 <li><a href="slider/slider-color-viewer.html">Color Viewer Slider</a> (<abbr title="High Contrast Support">HC</abbr>)</li>
                 <li><a href="slider/slider-rating.html">Rating Slider</a> (<abbr title="High Contrast Support">HC</abbr>)</li>
+                <li><a href="slider/slider-seek.html">Media Seek Slider  with aria-valuetext</a> (<abbr title="High Contrast Support">HC</abbr>)</li>
                 <li><a href="slider/slider-temperature.html">Vertical Temperature Slider</a> (<abbr title="High Contrast Support">HC</abbr>)</li>
                 <li><a href="spinbutton/datepicker-spinbuttons.html">Date Picker Spin Button</a></li>
                 <li><a href="toolbar/toolbar.html">Toolbar</a></li>
@@ -853,6 +860,7 @@ <h2 id="examples_by_props_label">Examples By Properties and States</h2>
               <ul>
                 <li><a href="slider/multithumb-slider.html">Horizontal Multi-Thumb Slider</a></li>
                 <li><a href="slider/slider-rating.html">Rating Slider</a> (<abbr title="High Contrast Support">HC</abbr>)</li>
+                <li><a href="slider/slider-seek.html">Media Seek Slider  with aria-valuetext</a> (<abbr title="High Contrast Support">HC</abbr>)</li>
                 <li><a href="slider/slider-temperature.html">Vertical Temperature Slider</a> (<abbr title="High Contrast Support">HC</abbr>)</li>
                 <li><a href="spinbutton/datepicker-spinbuttons.html">Date Picker Spin Button</a></li>
                 <li><a href="toolbar/toolbar.html">Toolbar</a></li>

examples/slider/css/slider-seek.css

@@ -0,0 +1,81 @@
+/* CSS Document */
+
+.slider-seek .label {
+  font-weight: bold;
+  font-size: 125%;
+}
+
+.slider-seek svg {
+  forced-color-adjust: auto;
+}
+
+.slider-seek text {
+  font-weight: bold;
+  fill: currentColor;
+  font-family: sans-serif;
+}
+
+.slider-seek {
+  margin-top: 1em;
+  padding: 6px;
+  color: black;
+}
+
+.slider-slider .value {
+  position: relative;
+  top: 20px;
+  height: 1.5em;
+  font-size: 80%;
+}
+
+.slider-seek .temp-value {
+  padding-left: 24px;
+  font-size: 200%;
+}
+
+.slider-seek .rail {
+  stroke: currentColor;
+  stroke-width: 2px;
+  fill: currentColor;
+  fill-opacity: 25%;
+}
+
+.slider-seek .thumb {
+  stroke-width: 0;
+  fill: currentColor;
+}
+
+.slider-seek .focus-ring {
+  stroke: currentColor;
+  stroke-opacity: 0;
+  fill-opacity: 0;
+  stroke-width: 3px;
+  display: none;
+}
+
+.slider-seek .slider-group {
+  touch-action: pan-y;
+}
+
+.slider-seek .slider-group .value {
+  display: none;
+}
+
+/* Focus and hover styling */
+
+.slider-seek.focus [role="slider"] {
+  color: #005a9c;
+}
+
+.slider-seek [role="slider"]:focus {
+  outline: none;
+}
+
+.slider-seek [role="slider"]:focus .focus-ring {
+  display: block;
+  stroke-opacity: 1;
+}
+
+.slider-seek [role="slider"]:focus .value {
+  display: block;
+}