Closed Exellin closed 7 months ago
This doesn't seem to be isolated to double thumbs, was able to reproduce with just a single value: https://stackblitz.com/edit/github-b14x5v-aewck1?file=src%2FApp.tsx%3AL10
import { Slider } from '@kobalte/core';
import './style.css';
function App() {
const onChangeEnd = ([newValue]: number[]) => {
console.log(newValue);
};
return (
<Slider.Root class="SliderRoot" onChangeEnd={onChangeEnd}>
<div class="SliderLabel">
<Slider.Label>Label</Slider.Label>
<Slider.ValueLabel />
</div>
<Slider.Track class="SliderTrack">
<Slider.Fill class="SliderRange" />
<Slider.Thumb class="SliderThumb">
<Slider.Input />
</Slider.Thumb>
</Slider.Track>
</Slider.Root>
);
}
export default App;
Thanks for reporting! I've made a PR to fix the issue, it was an oversight on my part 😅
Describe the bug When changing the lower or higher value for a Slider component, onChangeEnd will fire twice
To Reproduce Steps to reproduce the behavior:
App.tsx for reference, slightly modified from the multiple thumbs example at https://kobalte.dev/docs/core/components/slider
Expected behavior I think that onChangeEnd should only fire once when a value is changed. If an API request is made to save the new value, this request can end up being sent twice for each change of the minimum and maximum values.
Desktop (please complete the following information):