SSR for Slider component does not work

[outdoteth]

On refreshing the page (using nextjs and react), the slider component is not selectable nor is it aligned correctly.

After making some interactions and changing the state it then becomes selectable and aligns correctly:

I'm assuming that this issue is to do with SSR.

here is my slider component:

<Slider.Root
  className={styles.root}
  defaultValue={[0]}
  value={[value]}
  onValueChange={([value]) => onChange(value)}
  max={max}
>
  <Slider.Track className={styles.track}>
    <Slider.Range className={styles.range} />
  </Slider.Track>
  <Slider.Thumb className={styles.thumb} />
</Slider.Root>

[outdoteth]

Ah my bad. I was passing in a NaN value for the max parameter. It works now.