[slider] Validation occurs after thumb drag by default

[DavidCodina]

Bug report

When wrapped in Field.Root, the data-valid / data-invalid attributes are applied immediately after clicking and dragging a thumb. This happens regardless of whether validationMode is set. It behaves kind of like validationMode='onChange' is hardcoded. However, this behavior doesn't occur when using keyboard tab and arrows.

I casually checked how Input behaved, and it didn't do this. I suspect it has more to do with Slider than with the Field.Root (???).

Expected Behavior

The validate handler should not be triggered automatically, and should respect validationMode.

Example

import { Field } from '@base-ui/react/field'
import { Slider } from '@base-ui/react/slider'

export const SliderDemo = () => {
  return (
    <Field.Root
      validate={(value, _formValues) => {
        console.log('validating value:', value)
        if (typeof value !== 'number') {
          return 'Invalid type.'
        }

        if (value < 50) {
          return 'Value must be 50 or greater.'
        }

        return null
      }}
    >
      <Slider.Root defaultValue={50}>
        <Slider.Control className='flex touch-none items-center py-3 select-none'>
          <Slider.Track className='h-1 w-full rounded bg-gray-200 shadow-[inset_0_0_0_1px] shadow-gray-200 select-none'>
            <Slider.Indicator className='rounded bg-gray-700 select-none data-invalid:bg-red-500 data-valid:bg-green-500' />
            <Slider.Thumb
              aria-label='Volume'
              className='size-4 rounded-full bg-white outline outline-1 outline-gray-300 select-none has-[:focus-visible]:outline has-[:focus-visible]:outline-2 has-[:focus-visible]:outline-blue-800'
            />
          </Slider.Track>
        </Slider.Control>
      </Slider.Root>
    </Field.Root>
  )
}

[linear]

BAS-386