[Bug]: prevent initial position flash in fluent-slider

[radium-v]

🐛 Bug Report

A server-rendered <fluent-slider> initially displays its default position rather than the position represented by its value. After the element connects, the thumb and progress track move into place, causing a visible flash and layout shift.

💻 Repro or Code Sample

1. Server-render a slider using Declarative Shadow DOM.
2. Set a value away from the default midpoint.
3. Delay the client-side component definition.
4. Compare the slider before and after it upgrades.

<fluent-slider min="0" max="100" value="80"></fluent-slider>

<script type="module">
  setTimeout(
    () => import("@fluentui/web-components/slider/define.js"),
    2000,
  );
</script>

Before the definition loads, the slider displays its default initial view. After upgrade, the thumb and progress track move to 80%.

🤔 Expected Behavior

The server-rendered slider should display the position represented by its initial value. Connecting or hydrating the element should not visibly change the thumb or progress position.

For the example above, both the pre-hydration and hydrated views should render at 80%.

😯 Current Behavior

The server-rendered template binds the track and thumb styles to position, but position is initially undefined. As a result, --slider-thumb and --slider-progress are absent from the initial markup.

The component waits until the next animation frame after connectedCallback() to call setSliderPosition(). It then sets:

--slider-thumb: 80%;
--slider-progress: 80%;

This causes the slider to display its default state first and then visibly move to the configured value. The delay is especially noticeable when hydration or the component definition is deferred.

💁 Possible Solution

Calculate the initial position from value, min, max, orientation, and direction during server rendering or before the first paint. Only layout-dependent setup should be deferred to requestAnimationFrame().

The SSR output should contain the same --slider-thumb and --slider-progress values used after hydration.

Browsers which support typed attr() function values in CSS could also be used to calculate the initial position without requiring a script.

🔦 Context

This affects server-rendered applications and pages that defer custom-element definitions. Sliders briefly communicate the wrong value and then move after hydration, producing a distracting visual shift.

🌍 Your Environment

• OS & Device: macOS on Mac
• Browser: Chromium
• Version: @fluentui/web-components@3.1.2