Is there a way to prevent onValueChange on Slider from firing when non-bound value changes.

[matteron]

Hiya, been scouring through the source code but can't seem to find any answers so I figured I'd ask.

The use case is basically a playback slider on an audio element to control the current time.

I am looking to have the slider component only fire events when the user is actually interacting with the slider.
The time value is being updated outside by the playback by the audio element.

I'm trying to make it so when the user starts sliding. The bound time values "disengages" and only actually changes when onValueCommitted fires.

Here's some pseudo code of how I'd like for this to work.

<script lang="ts">
   let dragging = $state(false);
   let bitsTime = $derived(dragging ? internalTime : player.time)
</script>

<Slider.Root
	value={bitsTime}
	controlledValue
	onValueChange={(v) => {
		dragging = true;
		internalTime = v[0];
	}}
	onValueCommit={(v) => {
		player.time = v[0];
		dragging = false;
	}}
>...</Slider.Root>

Currently the issue is dragging will be set to true every time player.time updates since a change to the Slider's value prop will cause onValueChange to fire.

Thanks in advanced!

[leduyquang753]

I'm having an issue of the same category that, if I set the value to something outside the slider's range (the use case being the slider is only a convenient input for common values), then the slider clamps the value back and calls the onValueChange callback with the clamped value. I want the out-of-range value to stay like with the built-in <input type=range> element.