diff --git a/src/components/Form/Form.stories.tsx b/src/components/Form/Form.stories.tsx
index 77912fc..29b4884 100644
--- a/src/components/Form/Form.stories.tsx
+++ b/src/components/Form/Form.stories.tsx
@@ -536,6 +536,35 @@ export const WithDynamicInitialValues: StoryObj<typeof Form> = {
   ]
 };
 
+export const WithNumberRecordInput: StoryObj<
+  typeof Form<z.ZodType<{ dimensions: { depth: number; height: number; width: number } }>>
+> = {
+  args: {
+    content: {
+      dimensions: {
+        items: {
+          depth: { label: 'Depth (cm)' },
+          height: { description: 'Measure from the floor', label: 'Height (cm)' },
+          width: { label: 'Width (cm)' }
+        },
+        kind: 'number-record',
+        label: 'Dimensions',
+        variant: 'input'
+      }
+    },
+    validationSchema: z.object({
+      dimensions: z.object({
+        depth: z.number().positive(),
+        height: z.number().positive(),
+        width: z.number().positive()
+      })
+    }),
+    onSubmit: (data) => {
+      alert(JSON.stringify(data, null, 2));
+    }
+  }
+};
+
 export const WithResetButton: StoryObj<typeof Form> = {
   args: {
     content: {
diff --git a/src/components/Form/Form.test.tsx b/src/components/Form/Form.test.tsx
index be37550..2999cbc 100644
--- a/src/components/Form/Form.test.tsx
+++ b/src/components/Form/Form.test.tsx
@@ -399,4 +399,54 @@ describe('Form', () => {
       expect(onSubmit).toHaveBeenCalledWith({ symptoms: new Set(['none']) });
     });
   });
+
+  describe('number record with the input variant', () => {
+    const schema = z.object({ dimensions: z.object({ height: z.number('Required'), width: z.number('Required') }) });
+
+    beforeEach(() => {
+      render(
+        <Form
+          content={{
+            dimensions: {
+              items: { height: { label: 'Height' }, width: { label: 'Width' } },
+              kind: 'number-record',
+              label: 'Dimensions',
+              variant: 'input'
+            }
+          }}
+          data-testid={testid}
+          validationSchema={schema}
+          onError={onError}
+          onSubmit={onSubmit}
+        />
+      );
+    });
+
+    afterEach(() => {
+      vi.clearAllMocks();
+    });
+
+    it('should render a number input for each item, and no radio buttons', () => {
+      expect(screen.getByLabelText<HTMLInputElement>('Height').type).toBe('text');
+      expect(screen.getByLabelText('Width')).toBeInTheDocument();
+      expect(screen.queryAllByRole('radio')).toHaveLength(0);
+    });
+
+    it('should submit the number entered for each item', async () => {
+      await userEvent.type(screen.getByLabelText('Height'), '12.5');
+      await userEvent.type(screen.getByLabelText('Width'), '30');
+      fireEvent.submit(screen.getByTestId(testid));
+      await waitFor(() => expect(onSubmit).toHaveBeenCalledOnce());
+      expect(onSubmit.mock.lastCall?.[0]).toStrictEqual({ dimensions: { height: 12.5, width: 30 } });
+    });
+
+    it('should show the error of an item below that item', async () => {
+      await userEvent.type(screen.getByLabelText('Height'), '12');
+      fireEvent.submit(screen.getByTestId(testid));
+      await waitFor(() => expect(onError).toHaveBeenCalledOnce());
+      const errors = screen.getAllByTestId('error-message-text');
+      expect(errors.map((e) => e.innerHTML)).toMatchObject(['Required']);
+      expect(errors[0]!.closest('[data-field-group]')).toHaveAttribute('data-field-group', 'width');
+    });
+  });
 });
diff --git a/src/components/Form/NumberField/NumberField.spec.tsx b/src/components/Form/NumberField/NumberField.spec.tsx
index 0edc8b4..edec416 100644
--- a/src/components/Form/NumberField/NumberField.spec.tsx
+++ b/src/components/Form/NumberField/NumberField.spec.tsx
@@ -1,10 +1,12 @@
 import { useState } from 'react';
 
-import { render, screen } from '@testing-library/react';
+import { fireEvent, render, screen } from '@testing-library/react';
 import { describe, expect, it } from 'vitest';
 
 import { NumberField } from './NumberField.tsx';
 
+import type { NumberFieldSliderProps } from './NumberFieldSlider.tsx';
+
 const TestNumberFieldRadio = ({ options }: { options: { [key: number]: string } }) => {
   const [error, setError] = useState<string[] | undefined>();
   const [value, setValue] = useState<number | undefined>();
@@ -23,6 +25,33 @@ const TestNumberFieldRadio = ({ options }: { options: { [key: number]: string }
   );
 };
 
+const TestNumberFieldSlider = (
+  props: Partial<
+    Pick<NumberFieldSliderProps, 'defaultValue' | 'disabled' | 'marks' | 'max' | 'min' | 'readOnly' | 'showRange'>
+  >
+) => {
+  const [value, setValue] = useState<number | undefined>();
+  return (
+    <>
+      <NumberField
+        kind="number"
+        label="number-field"
+        max={10}
+        min={0}
+        name="number-field"
+        setError={() => undefined}
+        setValue={setValue}
+        value={value}
+        variant="slider"
+        {...props}
+      />
+      <button type="button" onClick={() => setValue(undefined)}>
+        clear
+      </button>
+    </>
+  );
+};
+
 const TWO_OPTIONS = { 0: 'The first in the morning', 1: 'Any other' };
 const THREE_OPTIONS = { 1: 'Never', 2: 'Sometimes', 3: 'Always' };
 const FIVE_OPTIONS = { 1: 'Very Low', 2: 'Low', 3: 'Medium', 4: 'High', 5: 'Very High' };
@@ -53,4 +82,86 @@ describe('NumberField', () => {
       expect(radioGroup.style.gridTemplateColumns).toBe('repeat(5, auto)');
     });
   });
+
+  describe('slider variant', () => {
+    const getThumbPosition = () => screen.getByRole('slider').getAttribute('aria-valuenow');
+    const getDisplayedValue = () => screen.getByTestId('slider-value').textContent;
+
+    it('should render no annotations by default', () => {
+      render(<TestNumberFieldSlider />);
+      expect(screen.queryByTestId('slider-annotations')).not.toBeInTheDocument();
+    });
+
+    it('should display a dimmed thumb at the midpoint when there is no value', () => {
+      render(<TestNumberFieldSlider max={20} min={10} />);
+      expect(getThumbPosition()).toBe('15');
+      expect(getDisplayedValue()).toBe('NA');
+      expect(screen.getByTestId('slider-thumb').closest('[data-unset]')).toBeInTheDocument();
+    });
+
+    it('should select the midpoint when the user presses the slider without a value', () => {
+      render(<TestNumberFieldSlider />);
+      // happy-dom does not implement pointer capture, which the slider uses when it is pressed
+      screen.getByTestId('slider-thumb').setPointerCapture = () => undefined;
+      fireEvent.pointerDown(screen.getByTestId('slider-thumb'));
+      expect(getDisplayedValue()).toBe('5');
+      expect(screen.getByTestId('slider-thumb').closest('[data-unset]')).not.toBeInTheDocument();
+    });
+
+    it.each(['disabled', 'readOnly'] as const)(
+      'should not select a value when the slider is pressed and is %s',
+      (prop) => {
+        render(<TestNumberFieldSlider {...{ [prop]: true }} />);
+        screen.getByTestId('slider-thumb').setPointerCapture = () => undefined;
+        fireEvent.pointerDown(screen.getByTestId('slider-thumb'));
+        expect(getDisplayedValue()).toBe('NA');
+      }
+    );
+
+    it('should select a value with the keyboard when there is no value', () => {
+      render(<TestNumberFieldSlider />);
+      fireEvent.keyDown(screen.getByRole('slider'), { key: 'ArrowRight' });
+      expect(getDisplayedValue()).toBe('6');
+    });
+
+    it('should set the default value as a real value that is visible', () => {
+      render(<TestNumberFieldSlider defaultValue={3} />);
+      expect(getDisplayedValue()).toBe('3');
+      expect(getThumbPosition()).toBe('3');
+      expect(screen.getByTestId('slider-thumb').closest('[data-unset]')).not.toBeInTheDocument();
+    });
+
+    it('should not set the default value when the slider is read-only', () => {
+      render(<TestNumberFieldSlider readOnly defaultValue={3} />);
+      expect(getDisplayedValue()).toBe('NA');
+    });
+
+    it('should set the default value again when the value is cleared', () => {
+      render(<TestNumberFieldSlider defaultValue={3} />);
+      fireEvent.keyDown(screen.getByRole('slider'), { key: 'ArrowRight' });
+      expect(getDisplayedValue()).toBe('4');
+      fireEvent.click(screen.getByText('clear'));
+      expect(getDisplayedValue()).toBe('3');
+    });
+
+    it('should display the minimum and maximum when showRange is set', () => {
+      render(<TestNumberFieldSlider showRange max={20} min={10} />);
+      expect(screen.getByTestId('slider-range')).toHaveTextContent('1020');
+      expect(screen.queryByTestId('slider-marks')).not.toBeInTheDocument();
+    });
+
+    it('should display the marks in order at the position of their value', () => {
+      render(<TestNumberFieldSlider marks={{ 0: 'Not at all', 5: 'Moderately', 10: 'Extremely' }} />);
+      const marks = [...screen.getByTestId('slider-marks').querySelectorAll<HTMLElement>('[data-mark-value]')];
+      expect(marks.map((mark) => mark.textContent)).toStrictEqual(['Not at all', 'Moderately', 'Extremely']);
+      expect(marks.map((mark) => mark.style.marginLeft)).toStrictEqual(['0%', '50%', '100%']);
+      expect(screen.queryByTestId('slider-range')).not.toBeInTheDocument();
+    });
+
+    it('should not display a mark that is outside of the range', () => {
+      render(<TestNumberFieldSlider marks={{ 5: 'Moderately', 11: 'Too high' }} />);
+      expect(screen.getByTestId('slider-marks')).toHaveTextContent('Moderately');
+      expect(screen.queryByText('Too high')).not.toBeInTheDocument();
+    });
+  });
 });
diff --git a/src/components/Form/NumberField/NumberField.stories.tsx b/src/components/Form/NumberField/NumberField.stories.tsx
index 8513d0a..7d4a8cb 100644
--- a/src/components/Form/NumberField/NumberField.stories.tsx
+++ b/src/components/Form/NumberField/NumberField.stories.tsx
@@ -37,6 +37,8 @@ export const Slider: Story = {
           args={{
             description: 'Lorem ipsum dolor sit amet consectetur adipisicing elit.',
             label: 'Slider Number Field',
+            max: 10,
+            min: 0,
             name: 'number-slider',
             setValue,
             value,
@@ -48,6 +50,100 @@ export const Slider: Story = {
   ]
 };
 
+export const SliderWithRange: Story = {
+  decorators: [
+    (Story) => {
+      const [value, setValue] = useState<number | undefined>();
+      return (
+        <Story
+          args={{
+            description: 'Lorem ipsum dolor sit amet consectetur adipisicing elit.',
+            label: 'Slider Number Field',
+            max: 10,
+            min: 0,
+            name: 'number-slider',
+            setValue,
+            showRange: true,
+            value,
+            variant: 'slider'
+          }}
+        />
+      );
+    }
+  ]
+};
+
+export const SliderWithMarks: Story = {
+  decorators: [
+    (Story) => {
+      const [value, setValue] = useState<number | undefined>();
+      return (
+        <Story
+          args={{
+            description: 'Lorem ipsum dolor sit amet consectetur adipisicing elit.',
+            label: 'Slider Number Field',
+            marks: { 0: 'Not at all', 5: 'Moderately', 10: 'Extremely' },
+            max: 10,
+            min: 0,
+            name: 'number-slider',
+            setValue,
+            value,
+            variant: 'slider'
+          }}
+        />
+      );
+    }
+  ]
+};
+
+export const SliderWithRangeAndMarks: Story = {
+  decorators: [
+    (Story) => {
+      const [value, setValue] = useState<number | undefined>();
+      return (
+        <Story
+          args={{
+            description: 'Lorem ipsum dolor sit amet consectetur adipisicing elit.',
+            label: 'Slider Number Field',
+            marks: { 0: 'No pain', 10: 'The worst pain that you can imagine' },
+            max: 10,
+            min: 0,
+            name: 'number-slider',
+            setValue,
+            showRange: true,
+            value,
+            variant: 'slider'
+          }}
+        />
+      );
+    }
+  ]
+};
+
+export const SliderWithDefaultValue: Story = {
+  decorators: [
+    (Story) => {
+      const [value, setValue] = useState<number | undefined>();
+      return (
+        <Story
+          args={{
+            defaultValue: 3,
+            description: 'Lorem ipsum dolor sit amet consectetur adipisicing elit.',
+            label: 'Slider Number Field',
+            max: 10,
+            min: 0,
+            name: 'number-slider',
+            setValue,
+            showRange: true,
+            value,
+            variant: 'slider'
+          }}
+        />
+      );
+    }
+  ]
+};
+
 export const Radio: Story = {
   decorators: [
     (Story) => {
diff --git a/src/components/Form/NumberField/NumberFieldSlider.tsx b/src/components/Form/NumberField/NumberFieldSlider.tsx
index 171eebe..21fa045 100644
--- a/src/components/Form/NumberField/NumberFieldSlider.tsx
+++ b/src/components/Form/NumberField/NumberFieldSlider.tsx
@@ -1,3 +1,5 @@
+import { useEffect } from 'react';
+
 import type { NumberFormField } from '@douglasneuroinformatics/libui-form-types';
 import type { Simplify } from 'type-fest';
 
@@ -7,22 +9,50 @@ import { FieldGroup } from '../FieldGroup/FieldGroup.tsx';
 
 import type { BaseFieldComponentProps } from '../types.ts';
 
+/** Returns the position of a value on the slider track, as a percentage of the range from min to max */
+const getPosition = (value: number, min: number, max: number) => {
+  if (max <= min) {
+    return 0;
+  }
+  return Math.min(Math.max(((value - min) / (max - min)) * 100, 0), 100);
+};
+
 export type NumberFieldSliderProps = Simplify<
   BaseFieldComponentProps<number> & Extract<NumberFormField, { variant: 'slider' }>
 >;
 
 export const NumberFieldSlider = ({
+  defaultValue,
   description,
   disabled,
   error,
   label,
+  marks,
   max,
   min,
   name,
   readOnly,
   setValue,
+  showRange,
   value
 }: NumberFieldSliderProps) => {
+  const isDisabled = Boolean(disabled || readOnly);
+
+  // also applies after the form is reset, since the user cannot clear a slider. A field that the user
+  // cannot change does not get a value.
+  useEffect(() => {
+    if (value === undefined && defaultValue !== undefined && !isDisabled) {
+      setValue(defaultValue);
+    }
+  }, [defaultValue, isDisabled, value]);
+
+  const isUnset = value === undefined;
+  const midpoint = min + Math.round((max - min) / 2);
+  const markEntries = Object.entries(marks ?? {})
+    .map(([key, text]) => [Number(key), text] as const)
+    .filter(([markValue]) => markValue >= min && markValue <= max)
+    .toSorted(([a], [b]) => a - b);
+
   return (
     <FieldGroup name={name}>
       <FieldGroup.Row>
@@ -31,17 +61,65 @@ export const NumberFieldSlider = ({
       </FieldGroup.Row>
       <FieldGroup.Row>
         <Slider
-          disabled={disabled || readOnly}
+          data-unset={isUnset ? '' : undefined}
+          disabled={isDisabled}
           max={max}
           min={min}
           name={name}
-          value={[value ?? 0]}
+          value={[value ?? midpoint]}
+          // without a value, the thumb is displayed at the midpoint, so a click on it does not change the
+          // position and would not otherwise select that value
+          onPointerDown={() => {
+            if (isUnset && !isDisabled) {
+              setValue(midpoint);
+            }
+          }}
           onValueChange={([value]) => setValue(value)}
         />
-        <span className="text-muted-foreground flex h-full w-8 items-center justify-center text-sm">
+        <span
+          className="text-muted-foreground flex h-full w-8 items-center justify-center text-sm"
+          data-testid="slider-value"
+        >
           {value ?? 'NA'}
         </span>
       </FieldGroup.Row>
+      {(showRange || markEntries.length > 0) && (
+        // the horizontal padding matches half the width of the thumb, and the right margin matches the
+        // width of the value plus the gap, so that 0% and 100% are the centers of the thumb at min and max
+        <div
+          className="text-muted-foreground -mt-2 mr-10 flex flex-col gap-1 px-2 text-xs"
+          data-testid="slider-annotations"
+        >
+          {showRange && (
+            <div className="flex justify-between" data-testid="slider-range">
+              <span>{min}</span>
+              <span>{max}</span>
+            </div>
+          )}
+          {markEntries.length > 0 && (
+            <div className="grid overflow-x-clip" data-testid="slider-marks">
+              {markEntries.map(([markValue, text]) => {
+                const position = getPosition(markValue, min, max);
+                return (
+                  <div className="col-start-1 row-start-1" key={markValue}>
+                    <span
+                      className="inline-block w-max max-w-[40%] leading-tight"
+                      data-mark-value={markValue}
+                      style={{
+                        marginLeft: `${position}%`,
+                        textAlign: position === 0 ? 'left' : position === 100 ? 'right' : 'center',
+                        transform: `translateX(-${position}%)`
+                      }}
+                    >
+                      {text}
+                    </span>
+                  </div>
+                );
+              })}
+            </div>
+          )}
+        </div>
+      )}
       <FieldGroup.Error error={error} />
     </FieldGroup>
   );
diff --git a/src/components/Form/NumberRecordField.tsx b/src/components/Form/NumberRecordField.tsx
index 43e2299..b45c6f4 100644
--- a/src/components/Form/NumberRecordField.tsx
+++ b/src/components/Form/NumberRecordField.tsx
@@ -16,18 +16,20 @@ export type NumberRecordFieldProps<T extends NumberRecordFieldValue = NumberReco
   BaseFieldComponentProps<NumberRecordFieldValue> & NumberRecordFormField<RequiredFieldValue<T>>
 >;
 
-export const NumberRecordField = <T extends NumberRecordFieldValue = NumberRecordFieldValue>({
-  disableAutoPrefix,
-  disabled,
-  error: recordError,
-  items,
-  label,
-  options,
-  readOnly,
-  setError: setRecordError,
-  setValue: setRecordValue,
-  value: recordValue
-}: NumberRecordFieldProps<T>) => {
+export const NumberRecordField = <T extends NumberRecordFieldValue = NumberRecordFieldValue>(
+  props: NumberRecordFieldProps<T>
+) => {
+  const {
+    disabled,
+    error: recordError,
+    items,
+    label,
+    readOnly,
+    setError: setRecordError,
+    setValue: setRecordValue,
+    value: recordValue
+  } = props;
+  const options = props.variant === 'likert' ? props.options : undefined;
   const optionsRef = useRef(options);
 
   useEffect(() => {
@@ -55,20 +57,25 @@ export const NumberRecordField = <T extends NumberRecordFieldValue = NumberRecor
       <div className="flex flex-col gap-6">
         {Object.keys(items).map((name) => {
           const item = items[name]!;
-          return (
+          const itemProps = {
+            error: recordError?.[name],
+            kind: 'number',
+            name,
+            readOnly: disabled || readOnly,
+            setError: (error: string[]) => setRecordError({ ...recordError, [name]: error }),
+            setValue: (value: number | undefined) => setRecordValue({ ...recordValue, [name]: value }),
+            value: recordValue?.[name],
+            ...item
+          } as const;
+          return props.variant === 'input' ? (
+            <NumberField key={name} variant="input" {...itemProps} />
+          ) : (
             <NumberField
-              disableAutoPrefix={disableAutoPrefix}
-              error={recordError?.[name]}
+              disableAutoPrefix={props.disableAutoPrefix}
               key={name}
-              kind="number"
-              name={name}
-              options={options}
-              readOnly={disabled || readOnly}
-              setError={(error) => setRecordError({ ...recordError, [name]: error })}
-              setValue={(value) => setRecordValue({ ...recordValue, [name]: value })}
-              value={recordValue?.[name]}
+              options={props.options}
               variant="radio"
-              {...item}
+              {...itemProps}
             />
           );
         })}
diff --git a/src/components/Slider/Slider.tsx b/src/components/Slider/Slider.tsx
index 95fa38f..b9e6d68 100644
--- a/src/components/Slider/Slider.tsx
+++ b/src/components/Slider/Slider.tsx
@@ -4,10 +4,14 @@ import { Range, Root, Thumb, Track } from '@radix-ui/react-slider';
 
 import { cn } from '#utils';
 
+/**
+ * A slider for a number in a range. Set the `data-unset` attribute to dim the thumb, which indicates that
+ * the position of the thumb is not a value selected by the user.
+ */
 export const Slider = ({ className, disabled, ref, ...props }: ComponentProps<typeof Root>) => {
   return (
     <Root
-      className={cn('relative flex w-full touch-none items-center py-1.5 select-none', className)}
+      className={cn('group/slider relative flex w-full touch-none items-center py-1.5 select-none', className)}
       disabled={disabled}
       ref={ref}
       {...props}
@@ -21,7 +25,7 @@ export const Slider = ({ className, disabled, ref, ...props }: ComponentProps<ty
       </Track>
       <Thumb
         aria-disabled={disabled}
-        className="bg-background focus-visible:ring-ring block h-4 w-4 rounded-full border border-slate-500 shadow-sm transition-colors focus-visible:ring-1 focus-visible:outline-hidden aria-disabled:cursor-not-allowed"
+        className="bg-background focus-visible:ring-ring block h-4 w-4 rounded-full border border-slate-500 shadow-sm transition-colors group-data-unset/slider:opacity-40 focus-visible:ring-1 focus-visible:outline-hidden aria-disabled:cursor-not-allowed"
         data-testid="slider-thumb"
       />
     </Root>