Merge pull request #1026 from googlefonts/issue-1002

Discrete value range slider should be shorter
googlefonts · Dec 18, 2023 · 06ef874 · 06ef874
2 parents 30f750d + 702efc7
commit 06ef874
Showing 1 changed file with 12 additions and 1 deletion.
diff --git a/src/fontra/client/web-components/range-slider.js b/src/fontra/client/web-components/range-slider.js
@@ -358,7 +358,18 @@ export class RangeSlider extends html.UnlitElement {
           ]),
         ]),
         html.div(
-          { class: "range-container" },
+          {
+            class: "range-container",
+            style: this.isDiscrete()
+              ? // In the discrete case, to keep the spacing between tick marks
+                // constant, the max-width for the slider is computed like this:
+                // (the number of values - 1) * (desired distance from left of
+                // tickmark to left of next tickmark = 20px)
+                // + one tickmark thickness (1px)
+                // + the total padding of the tickmarks span (6.5px * 2)
+                `max-width: ${(this.values.length - 1) * 20 + 1 + 13}px; width: 100%;`
+              : "",
+          },
           [
             (this.rangeInput = html.input({
               type: "range",