positioning fix on slider ticks

Author: KTibow

package.json

@@ -1,6 +1,6 @@
 {
   "name": "m3-svelte",
-  "version": "3.4.11",
+  "version": "3.4.12",
   "license": "Apache-2.0 OR GPL-3.0-only",
   "repository": "KTibow/m3-svelte",
   "author": {

src/lib/forms/SliderTicks.svelte

@@ -52,7 +52,7 @@
       class="tick"
       class:hidden={Math.abs(tick / 100 - $valueDisplayed / range) < 0.01}
       class:inactive={tick / 100 > $valueDisplayed / range}
-      style="left: calc(4px + {tick}% - {i * 2}px);"
+      style:--x={tick / 100 - 0.5}
     ></div>
   {/each}
   <div class="thumb"></div>
@@ -125,7 +125,8 @@
     height: 4px;
     border-radius: var(--m3-util-rounding-full);
     top: 50%;
-    translate: 0 -50%;
+    left: calc(50% + (100% - 0.75rem) * var(--x));
+    translate: -50% -50%;
     background-color: rgb(var(--m3-scheme-primary-container));
     pointer-events: none;
   }