Slider onChange callback can't see states of calling component

[ginfonic]

What package has an issue

@mantine/core

Describe the bug

In Slider component when you use a custom callback in onChange prop that not only set a value but also uses internal states of calling component these states are invisible, undefined or 0.
The other Mantine components, Select for instance or the standard ones (input) can see calling component states in callback normally as it should be.
I hope it's a bug not a feature.

What version of @mantine/hooks page do you have in package.json?

5.9.5

If possible, please include a link to a codesandbox with the reproduced problem

No response

Do you know how to fix the issue

No

Are you willing to participate in fixing this issue and create a pull request with the fix

None

Possible fix

No response

[rtivital]

Slider onChange function is momoized to improve performance, it cannot reference state variables.

[frustak]

I've found a workaround, you can use this component instead if memoization is making issues:

import { Slider, SliderProps } from '@mantine/core'
import { useDidUpdate } from '@mantine/hooks'

function SliderNoMemo(props: SliderProps) {
	const [value, setValue] = useState(props.value)

	useDidUpdate(() => {
		if (value) props.onChange?.(value)
	}, [value])

	useDidUpdate(() => {
		setValue(props.value)
	}, [props.value])

	return <Slider {...props} value={value} onChange={setValue} />
}

[rtivital]

Duplicate of #2840

[tscans]

import { Slider, SliderProps } from '@mantine/core'
import { useDidUpdate } from '@mantine/hooks'

function SliderNoMemo(props: SliderProps) {
	const [value, setValue] = useState(props.value)

	useDidUpdate(() => {
		if (value) props.onChange?.(value)
	}, [value])

	useDidUpdate(() => {
		setValue(props.value)
	}, [props.value])

	return <Slider {...props} value={value} onChange={setValue} />
}

Not ideal but this worked and helped me. Thanks!