Rating Slider Example: Redesign as an input for 10-value satisfaction scale

content/patterns/slider/examples/css/slider-rating.css

@@ -6,6 +6,7 @@
 
 .rating-slider {
   color: #005a9c;
+  user-select: none;
 }
 
 .rating-slider svg {
@@ -14,84 +15,88 @@
 }
 
 .rating-slider svg .focus-ring {
-  fill: #eee;
+  fill: currentcolor;
   stroke-width: 0;
   fill-opacity: 0;
 }
 
-.rating-slider svg .star {
+.rating-slider svg .target {
   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 {
+.rating-slider svg .label {
+  font-size: 90%;
+  font-family: sans-serif;
   fill: currentcolor;
-  fill-opacity: 1;
 }
 
-.rating-slider[aria-valuenow="0.5"] svg .star-1 .fill-left {
-  fill: currentcolor;
-  fill-opacity: 1;
+.rating-slider svg .description {
+  font-size: 90%;
+  fill: canvastext;
 }
 
-.rating-slider[aria-valuenow="1"] svg .star-1 .star {
+.rating-slider svg .current .target {
   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 svg .current .label {
+  fill: white;
+  font-weight: bold;
 }
 
-.rating-slider[aria-valuenow="2"] svg .star-2 .star {
-  fill: currentcolor;
-  fill-opacity: 1;
-}
+/* focus styling */
 
-.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:focus,
+.rating-slider:focus-visible {
+  outline: none !important;
 }
 
-.rating-slider[aria-valuenow="3"] svg .star-3 .star {
-  fill: currentcolor;
-  fill-opacity: 1;
+.rating-slider svg .focus {
+  stroke-width: 0;
+  stroke: currentcolor;
+  fill-opacity: 0;
 }
 
-.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:focus svg .focus-ring {
+  stroke-width: 2px;
+  stroke: currentcolor;
 }
 
-.rating-slider[aria-valuenow="4"] svg .star-4 .star {
-  fill: currentcolor;
-  fill-opacity: 1;
-}
+@media (forced-colors: active) {
+  .rating-slider svg .focus-ring {
+    fill: linktext;
+  }
 
-.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;
-}
+  .rating-slider svg .target {
+    stroke: linktext;
+  }
 
-/* focus styling */
+  .rating-slider svg .label {
+    fill: linktext;
+  }
 
-.rating-slider:focus {
-  outline: none;
-}
+  .rating-slider svg .description {
+    fill: linktext;
+  }
 
-.rating-slider:focus svg .focus-ring {
-  stroke-width: 2px;
-  stroke: currentcolor;
+  .rating-slider svg .current .target {
+    fill: linktext;
+  }
+
+  .rating-slider svg .current .label {
+    fill: canvas;
+  }
+
+  /* focus styling */
+
+  .rating-slider svg .focus {
+    stroke: linktext;
+  }
+
+  .rating-slider:focus svg .focus-ring {
+    stroke: linktext;
+  }
 }