SliderField value is not displayed properly when state changes externally

[matt-kubica]

Before creating a new issue, please confirm:

• I have searched for duplicate or closed issues and discussions.
• I have tried disabling all browser extensions or using a different browser
• I have tried deleting the node_modules folder and reinstalling my dependencies
• I have read the guide for submitting bug reports.

On which framework/platform are you having an issue?

React

Which UI component?

Primitive components

How is your app built?

Vite

What browsers are you seeing the problem on?

Chrome, Safari

Which region are you seeing the problem in?

Not applicable

Please describe your bug.

SliderField rendered value is not updated if state is changed externally. Consider following example:

import { useState } from 'react';
import { Flex, Button, SliderField } from '@aws-amplify/ui-react';

function App() {
  const defaultSliderValue = 20;
  const [count, setCount] = useState<number>(defaultSliderValue);

  const onReset = () => {
    setCount(() => defaultSliderValue);
  };

  const formatValue = (value: number) => {
    console.log(`State: ${count}`);
    console.log(`Slider's value: ${value}`);
    return value;
  };

  return (
    <Flex direction="column">
      <SliderField
        label="slider"
        value={count}
        onChange={setCount}
        formatValue={formatValue}
      />
      <Button onClick={onReset}>Reset</Button>
    </Flex>
  );
}

export default App;

SliderField displays count and also controls its value via onChange callback. There's also another actor that can control the value - Button with onClick callback which causes "external" state change.

The last piece is formatValue function that just bypasses slider's internal value, but also peeks slider's internal value as well as count state.

What's the expected behaviour?

The expected behaviour is to see slider's value change whenever it's controled via slider itself (this works fine), but also to see slider's value being updated properly whenever state is changed externally, for example via reset button.

Unfortunately, only the slider's position is updated when state changes externally, the slider's value is stuck on the latest value set by slider itself. This is captured on a screencast below, notice the slider's value in upper right corner.

slider-bug.mov

Help us reproduce the bug!

Here's minimal project React + Vite that uses @aws-amplify/ui-react. You can run it and play around with the application. You can also peek internal slider's value as well as count state via console as they're logged whenever renderValue function is called.

Code Snippet

Provided above

Console log output

Available when running stackblitz project

Additional information and screenshots

Project's package.json:

{
  "name": "vite-react-typescript-starter",
  "private": true,
  "version": "0.0.0",
  "type": "module",
  "scripts": {
    "dev": "vite",
    "build": "tsc -b && vite build",
    "lint": "eslint .",
    "preview": "vite preview"
  },
  "dependencies": {
    "@aws-amplify/ui-react": "^6.7.2",
    "react": "^18.3.1",
    "react-dom": "^18.3.1"
  },
  "devDependencies": {
    "@eslint/js": "^9.17.0",
    "@types/react": "^18.3.18",
    "@types/react-dom": "^18.3.5",
    "@vitejs/plugin-react": "^4.3.4",
    "eslint": "^9.17.0",
    "eslint-plugin-react-hooks": "^5.0.0",
    "eslint-plugin-react-refresh": "^0.4.16",
    "globals": "^15.14.0",
    "typescript": "~5.7.2",
    "typescript-eslint": "^8.18.2",
    "vite": "^6.0.5"
  }
}

[cwomack]

@matt-kubica, thanks for opening this issue. We'll mark this as a bug for now and follow up with any further questions/context needed.