Slider: Rating Slider Example

examples/index.html

@@ -303,8 +303,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-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="slider/slider-rating.html">Rating Slider</a></li>
               </ul>
             </td>
           </tr>
@@ -588,6 +588,7 @@ <h2 id="examples_by_props_label">Examples By Properties and States</h2>
                 <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="slider/slider-rating.html">Rating 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>
@@ -625,6 +626,7 @@ <h2 id="examples_by_props_label">Examples By Properties and States</h2>
                 <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="slider/slider-rating.html">Rating 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>
@@ -676,10 +678,6 @@ <h2 id="examples_by_props_label">Examples By Properties and States</h2>
             <td><code>aria-multiselectable</code></td>
             <td><a href="listbox/listbox-rearrangeable.html">Listboxes with Rearrangeable Options</a></td>
           </tr>
-          <tr>
-            <td><code>aria-orientation</code></td>
-            <td><a href="slider/slider-2.html">Slider  with aria-orientation and aria-valuetext</a></td>
-          </tr>
           <tr>
             <td><code>aria-owns</code></td>
             <td><a href="treeview/treeview-navigation.html">Navigation Treeview</a></td>
@@ -767,8 +765,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-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="slider/slider-rating.html">Rating Slider</a></li>
                 <li><a href="spinbutton/datepicker-spinbuttons.html">Date Picker Spin Button</a></li>
               </ul>
             </td>
@@ -779,8 +777,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-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="slider/slider-rating.html">Rating 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 +790,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-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="slider/slider-rating.html">Rating 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>
@@ -804,7 +802,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-rating.html">Rating 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-rating.css

@@ -0,0 +1,97 @@
+/* CSS Document */
+
+.rating-slider label {
+  display: block;
+}
+
+.rating-slider {
+  color: #005a9c;
+}
+
+.rating-slider svg {
+  forced-color-adjust: auto;
+  touch-action: pan-y;
+}
+
+.rating-slider svg .focus-ring {
+  fill: #eee;
+  stroke-width: 0;
+  fill-opacity: 0;
+}
+
+.rating-slider svg .star {
+  stroke-width: 2px;
+  stroke: currentColor;
+  fill-opacity: 0;
+}
+
+.rating-slider svg .fill-left,
+.rating-slider svg .fill-right {
+  stroke-width: 0;
+  fill-opacity: 0;
+}
+
+.rating-slider[aria-valuenow="5"] svg .star {
+  fill: currentColor;
+  fill-opacity: 1;
+}
+
+.rating-slider[aria-valuenow="0.5"] svg .star-1 .fill-left {
+  fill: currentColor;
+  fill-opacity: 1;
+}
+
+.rating-slider[aria-valuenow="1"] svg .star-1 .star {
+  fill: currentColor;
+  fill-opacity: 1;
+}
+
+.rating-slider[aria-valuenow="1.5"] svg .star-1 .star,
+.rating-slider[aria-valuenow="1.5"] svg .star-2 .fill-left {
+  fill: currentColor;
+  fill-opacity: 1;
+}
+
+.rating-slider[aria-valuenow="2"] svg .star-2 .star {
+  fill: currentColor;
+  fill-opacity: 1;
+}
+
+.rating-slider[aria-valuenow="2.5"] svg .star-2 .star,
+.rating-slider[aria-valuenow="2.5"] svg .star-3 .fill-left {
+  fill: currentColor;
+  fill-opacity: 1;
+}
+
+.rating-slider[aria-valuenow="3"] svg .star-3 .star {
+  fill: currentColor;
+  fill-opacity: 1;
+}
+
+.rating-slider[aria-valuenow="3.5"] svg .star-3 .star,
+.rating-slider[aria-valuenow="3.5"] svg .star-4 .fill-left {
+  fill: currentColor;
+  fill-opacity: 1;
+}
+
+.rating-slider[aria-valuenow="4"] svg .star-4 .star {
+  fill: currentColor;
+  fill-opacity: 1;
+}
+
+.rating-slider[aria-valuenow="4.5"] svg .star-4 .star,
+.rating-slider[aria-valuenow="4.5"] svg .star-5 .fill-left {
+  fill: currentColor;
+  fill-opacity: 1;
+}
+
+/* focus styling */
+
+.rating-slider:focus {
+  outline: none;
+}
+
+.rating-slider:focus svg .focus-ring {
+  stroke-width: 2px;
+  stroke: currentColor;
+}