Slider: Add callback listener only on drag

[dagulv]

Currently the slider onValueChange will be called any time when the sliders value changes, on drag but also when you update its value externally. This can cause problems for when you want to sync the values between sliders and inputs. For example if the slider and input have different steps the slider will overwrite the input value to the sliders closest step value.

This callback listener will essentially be similar to an elements event listener, ie oninput for an input.

[huntabyte]

Can you give me an example of the behavior you're experiencing. I don't believe onValueChange would be being called when you mutate the value outside (not saying it isn't doing that, but saying it shouldn't).

[shyakadavis]

I don't know if this is related, but I ran into this weird issue when trying out svelte-flow some time ago. xyflow/xyflow#4916 (comment)

TLDR;

The React Slider component calls onValueChange when a user interaction changes the slider value (dragging a slider thumb around), while the Svelte one calls onValueChange even if the value was changed through the value prop.

I can try to create a minimal repro (with/without the svelte-flow stuff) if indeed this is related to the issue mentioned.

[dagulv]

I created a test repl, and it does seem to work correctly as long as I use an array as the source of truth. However if it is not an array and created on the fly in the value prop or from a $derived it wont work. REPL: https://svelte.dev/playground/843f6d84a3cb457ab5a619eeb898061c?version=5.38.10

<script lang="ts">
	import { Slider as SliderPrimitive } from 'bits-ui';
	
	const min = 0;
	const max = 100;

	// works
	let value = $state([min, max]);
	$inspect(value[1]);

	// doesnt work
	let minValue = $state(min);
	let maxValue = $state(max);
	let minmax = $derived.by(() => {
		const state = [minValue, maxValue];
		return state;
	});
</script>
Works as intended
<div class="p-4 w-80 flex flex-col gap-4">
	<SliderPrimitive.Root
		value={value}
		data-slot="slider"
		orientation="horizontal"
		{min}
		{max}
		step={10}
		onValueChange={(v) => {
			console.log(v);
			value = v;
		}}
		class="relative flex w-full touch-none select-none items-center"
	>
		{#snippet children({ thumbs })}
			<span
				data-orientation="horizontal"
				data-slot="slider-track"
				class="bg-gray-100 relative h-2 w-full grow cursor-pointer overflow-hidden rounded-full"
			>
				<SliderPrimitive.Range
					data-slot="slider-range"
					class="bg-foreground absolute h-full"
				/>
			</span>
			{#each thumbs as thumb (thumb)}
				<SliderPrimitive.Thumb
					data-slot="slider-thumb"
					index={thumb}
					class="bg-white block size-[25px] cursor-pointer rounded-full border"
				/>
			{/each}
		{/snippet}
	</SliderPrimitive.Root>
	<div>
		<input class="border w-1/2" type="number" bind:value={value[0]} {min} max={value[1] ?? max} />
		<input class="border w-1/2" type="number" bind:value={value[1]} {max} min={value[0] ?? min} />
	</div>
	
	value: {value}
</div>

Value is always locked at step
<div class="p-4 w-80 flex flex-col gap-4">
	<SliderPrimitive.Root
		value={minmax}
		data-slot="slider"
		orientation="horizontal"
		{min}
		{max}
		step={10}
		onValueChange={(v) => {
			console.log(v);
			minValue = v[0];
			maxValue = v[1];
		}}
		class="relative flex w-full touch-none select-none items-center"
	>
		{#snippet children({ thumbs })}
			<span
				data-orientation="horizontal"
				data-slot="slider-track"
				class="bg-gray-100 relative h-2 w-full grow cursor-pointer overflow-hidden rounded-full"
			>
				<SliderPrimitive.Range
					data-slot="slider-range"
					class="bg-foreground absolute h-full"
				/>
			</span>
			{#each thumbs as thumb (thumb)}
				<SliderPrimitive.Thumb
					data-slot="slider-thumb"
					index={thumb}
					class="bg-white block size-[25px] cursor-pointer rounded-full border"
				/>
			{/each}
		{/snippet}
	</SliderPrimitive.Root>
	<div>
		<input class="border w-1/2" type="number" bind:value={minValue} {min} max={maxValue ?? max} />
		<input class="border w-1/2" type="number" bind:value={maxValue} {max} min={minValue ?? min} />
	</div>
	
	value: {minValue}, {maxValue}
</div>