From 1799c50c7a3af7ba69e4020cd92dc9d7c7a0e905 Mon Sep 17 00:00:00 2001
From: varun2735126 <varun2735126@gmail.com>
Date: Tue, 18 Aug 2026 00:14:57 +0530
Subject: [PATCH 1/3] feat(slider): add SliderMark and snapPoints for tick
 marks and pointer snapping

Adds the pieces of adobe/react-spectrum#8285 that cannot be built on top
of the current API.

useSliderState gains snapPoints and snapThreshold. Snapping is applied in
setThumbPercent, which only pointer interactions go through, so keyboard
interactions continue to move by step. Snap points bypass step rounding so
that a snap point off the step grid is still reachable with a pointer.

The closest-thumb search moves out of useSlider onto the state as
getClosestThumbIndex, so SliderMark can reuse it.

useSlider now seeds the track drag position from the pointer instead of the
thumb, so a value adjusted to fit the step or a snap point no longer offsets
the rest of the drag.
---
 .../dev/s2-docs/pages/react-aria/Slider.mdx   |  47 ++++++-
 .../react-aria-components/exports/Slider.ts   |   5 +-
 .../react-aria-components/exports/index.ts    |   5 +-
 packages/react-aria-components/src/Slider.tsx | 128 +++++++++++++++++
 .../stories/Slider.stories.tsx                |  50 ++++++-
 .../react-aria-components/test/Slider.test.js | 130 ++++++++++++++++++
 packages/react-aria/src/slider/useSlider.ts   |  31 +----
 .../react-aria/test/slider/useSlider.test.js  |  21 +++
 .../src/slider/useSliderState.ts              |  88 ++++++++++--
 .../test/slider/useSliderState.test.js        |  89 ++++++++++++
 starters/docs/src/Slider.css                  |  69 ++++++++++
 starters/docs/src/Slider.tsx                  |  10 ++
 12 files changed, 635 insertions(+), 38 deletions(-)

diff --git a/packages/dev/s2-docs/pages/react-aria/Slider.mdx b/packages/dev/s2-docs/pages/react-aria/Slider.mdx
index 893ff592436..0dc63878da9 100644
--- a/packages/dev/s2-docs/pages/react-aria/Slider.mdx
+++ b/packages/dev/s2-docs/pages/react-aria/Slider.mdx
@@ -99,6 +99,46 @@ By default, slider values are percentages between 0 and 100. Use the `minValue`,
     fillOffset: 75
   }} />
 
+## Marks
+
+Render a `<SliderMark>` for each value you want to label along the track. Pressing a mark moves the nearest thumb to its value, so labels stay usable when they sit outside the track's bounds. Marks are not focusable — the thumb remains the keyboard interface — so keep their content short, or add `aria-hidden` where it would only repeat what the thumb already announces.
+
+```tsx render
+"use client";
+import {Slider} from 'vanilla-starter/Slider';
+
+<Slider
+  label="Brightness"
+  minValue={-100}
+  maxValue={100}
+  defaultValue={0}
+  /*- begin highlight -*/
+  marks={[-100, -50, 0, 50, 100]} />
+  {/*- end highlight -*/}
+```
+
+### Snapping
+
+Marks alone do not change how a thumb moves. Use `snapPoints` to make a pointer snap to values as it passes them, while leaving the values in between reachable. `snapThreshold` controls how close the pointer must get, as a fraction of the track length.
+
+Keyboard interactions are deliberately unaffected — arrow keys continue to move by `step` — so a snap point is a pointer affordance rather than a restriction on the value.
+
+<VisualExample
+  component={VanillaSlider}
+  docs={vanillaDocs.exports.Slider}
+  links={vanillaDocs.links}
+  props={['snapThreshold', 'step']}
+  initialProps={{
+    label: 'Brightness',
+    minValue: -100,
+    maxValue: 100,
+    defaultValue: 0,
+    marks: [-100, -50, 0, 50, 100],
+    snapPoints: [-100, -50, 0, 50, 100]
+  }} />
+
+Snap points do not have to be multiples of `step`. A value such as `0` on a slider that steps by 25 is only reachable with a pointer.
+
 ## Examples
 
 <ExampleList tag="slider" pages={props.pages} />
@@ -107,12 +147,13 @@ By default, slider values are percentages between 0 and 100. Use the `minValue`,
 
 <Anatomy />
 
-```tsx links={{Slider: '#slider', SliderOutput: '#slideroutput', SliderTrack: '#slidertrack', SliderFill: '#sliderfill', SliderThumb: '#sliderthumb'}}
+```tsx links={{Slider: '#slider', SliderOutput: '#slideroutput', SliderTrack: '#slidertrack', SliderFill: '#sliderfill', SliderMark: '#slidermark', SliderThumb: '#sliderthumb'}}
 <Slider>
   <Label />
   <SliderOutput />
   <SliderTrack>
     <SliderFill />
+    <SliderMark />
     <SliderThumb />
     <SliderThumb>
       <Label />
@@ -137,6 +178,10 @@ By default, slider values are percentages between 0 and 100. Use the `minValue`,
 
 <PropTable component={docs.exports.SliderFill} links={docs.links} showDescription />
 
+### SliderMark
+
+<PropTable component={docs.exports.SliderMark} links={docs.links} showDescription />
+
 ### SliderThumb
 
 <PropTable component={docs.exports.SliderThumb} links={docs.links} showDescription />
diff --git a/packages/react-aria-components/exports/Slider.ts b/packages/react-aria-components/exports/Slider.ts
index 4459bb81bf4..86b5e249b78 100644
--- a/packages/react-aria-components/exports/Slider.ts
+++ b/packages/react-aria-components/exports/Slider.ts
@@ -20,6 +20,7 @@ export {
   SliderTrack,
   SliderThumb,
   SliderFill,
+  SliderMark,
   SliderContext,
   SliderOutputContext,
   SliderTrackContext,
@@ -35,7 +36,9 @@ export type {
   SliderTrackRenderProps,
   SliderThumbRenderProps,
   SliderFillProps,
-  SliderFillRenderProps
+  SliderFillRenderProps,
+  SliderMarkProps,
+  SliderMarkRenderProps
 } from '../src/Slider';
 export type {SliderState} from 'react-stately/useSliderState';
 
diff --git a/packages/react-aria-components/exports/index.ts b/packages/react-aria-components/exports/index.ts
index 1851f59f5a2..65ea485a3b4 100644
--- a/packages/react-aria-components/exports/index.ts
+++ b/packages/react-aria-components/exports/index.ts
@@ -188,6 +188,7 @@ export {
   SliderTrack,
   SliderThumb,
   SliderFill,
+  SliderMark,
   SliderContext,
   SliderOutputContext,
   SliderTrackContext,
@@ -457,7 +458,9 @@ export type {
   SliderTrackRenderProps,
   SliderFillProps,
   SliderFillRenderProps,
-  SliderThumbRenderProps
+  SliderThumbRenderProps,
+  SliderMarkProps,
+  SliderMarkRenderProps
 } from '../src/Slider';
 export type {
   SwitchProps,
diff --git a/packages/react-aria-components/src/Slider.tsx b/packages/react-aria-components/src/Slider.tsx
index 7129ae20c18..6f328ad181c 100644
--- a/packages/react-aria-components/src/Slider.tsx
+++ b/packages/react-aria-components/src/Slider.tsx
@@ -47,6 +47,7 @@ import React, {
 import {SliderState, useSliderState} from 'react-stately/useSliderState';
 import {useFocusRing} from 'react-aria/useFocusRing';
 import {useHover} from 'react-aria/useHover';
+import {useLocale} from 'react-aria/I18nProvider';
 import {useNumberFormatter} from 'react-aria/useNumberFormatter';
 import {VisuallyHidden} from 'react-aria/VisuallyHidden';
 
@@ -374,6 +375,133 @@ export const SliderThumb = /*#__PURE__*/ (forwardRef as forwardRefType)(function
   );
 });
 
+export interface SliderMarkRenderProps extends SliderRenderProps {
+  /**
+   * The value along the track that the mark is positioned at.
+   */
+  value: number;
+  /**
+   * Whether the mark is currently hovered with a mouse.
+   *
+   * @selector [data-hovered]
+   */
+  isHovered: boolean;
+}
+
+export interface SliderMarkProps
+  extends HoverEvents, RenderProps<SliderMarkRenderProps>, GlobalDOMAttributes<HTMLDivElement> {
+  /** The value along the track that the mark is positioned at. */
+  value: number;
+  /**
+   * The CSS [className](https://developer.mozilla.org/en-US/docs/Web/API/Element/className) for the
+   * element. A function may be provided to compute the class based on component state.
+   *
+   * @default 'react-aria-SliderMark'
+   */
+  className?: ClassNameOrFunction<SliderMarkRenderProps>;
+}
+
+/**
+ * A slider mark labels a value along the track. Pressing it moves the nearest thumb to that value.
+ */
+export const SliderMark = /*#__PURE__*/ (forwardRef as forwardRefType)(function SliderMark(
+  props: SliderMarkProps,
+  ref: ForwardedRef<HTMLDivElement>
+) {
+  let {value, onHoverStart, onHoverEnd, onHoverChange, ...otherProps} = props;
+  let state = useContext(SliderStateContext)!;
+  let {direction} = useLocale();
+  let {hoverProps, isHovered} = useHover({
+    onHoverStart,
+    onHoverEnd,
+    onHoverChange,
+    isDisabled: state.isDisabled
+  });
+
+  // Marks sit inside the track, which moves the nearest thumb to wherever the pointer went down.
+  // Stop that here so the thumb lands on the mark's exact value, including for labels rendered
+  // outside the track's bounds.
+  let onDown = (e: React.SyntheticEvent) => {
+    e.stopPropagation();
+    let index = state.getClosestThumbIndex(value);
+    if (index < 0 || !state.isThumbEditable(index)) {
+      return;
+    }
+
+    e.preventDefault();
+    state.setFocusedThumb(index);
+    state.setThumbDragging(index, true);
+    state.setThumbPercent(index, state.getValuePercent(value));
+    state.setThumbDragging(index, false);
+  };
+
+  let isVertical = state.orientation === 'vertical';
+  let percent = state.getValuePercent(value);
+  if (isVertical || direction === 'rtl') {
+    percent = 1 - percent;
+  }
+
+  let renderProps = useRenderProps({
+    ...props,
+    defaultClassName: 'react-aria-SliderMark',
+    defaultStyle: {
+      position: 'absolute',
+      [isVertical ? 'top' : 'left']: `${percent * 100}%`,
+      transform: 'translate(-50%, -50%)'
+    },
+    values: {
+      orientation: state.orientation,
+      isDisabled: state.isDisabled,
+      isHovered,
+      value,
+      state
+    }
+  });
+
+  // Pointer events are dispatched before their mouse and touch equivalents, so only one handler
+  // acts on an interaction and the rest just stop propagation. JSDOM has no PointerEvent, so tests
+  // fall through to the mouse and touch handlers.
+  let hasPointerEvents = typeof PointerEvent !== 'undefined';
+  let interactions: HTMLAttributes<HTMLDivElement> = !state.isDisabled
+    ? {
+        onPointerDown: (e: React.PointerEvent) => {
+          if (e.pointerType === 'mouse' && (e.button !== 0 || e.altKey || e.ctrlKey || e.metaKey)) {
+            return;
+          }
+          onDown(e);
+        },
+        onMouseDown: (e: React.MouseEvent) => {
+          if (e.button !== 0 || e.altKey || e.ctrlKey || e.metaKey) {
+            return;
+          }
+          if (hasPointerEvents) {
+            e.stopPropagation();
+          } else {
+            onDown(e);
+          }
+        },
+        onTouchStart: (e: React.TouchEvent) => {
+          if (hasPointerEvents) {
+            e.stopPropagation();
+          } else {
+            onDown(e);
+          }
+        }
+      }
+    : {};
+
+  return (
+    <dom.div
+      {...mergeProps(otherProps, hoverProps, interactions)}
+      {...renderProps}
+      ref={ref}
+      data-hovered={isHovered || undefined}
+      data-orientation={state.orientation || undefined}
+      data-disabled={state.isDisabled || undefined}
+    />
+  );
+});
+
 export interface SliderFillRenderProps extends SliderRenderProps {
   /**
    * Whether the slider fill is currently hovered with a mouse.
diff --git a/packages/react-aria-components/stories/Slider.stories.tsx b/packages/react-aria-components/stories/Slider.stories.tsx
index c8f77cc2f02..3b32023bdb6 100644
--- a/packages/react-aria-components/stories/Slider.stories.tsx
+++ b/packages/react-aria-components/stories/Slider.stories.tsx
@@ -14,7 +14,7 @@ import {Label} from '../src/Label';
 
 import {Meta, StoryFn} from '@storybook/react';
 import React from 'react';
-import {Slider, SliderOutput, SliderThumb, SliderTrack} from '../src/Slider';
+import {Slider, SliderMark, SliderOutput, SliderThumb, SliderTrack} from '../src/Slider';
 import styles from '../example/index.css';
 import './styles.css';
 
@@ -103,7 +103,53 @@ SliderCSS.argTypes = {
   }
 };
 
-const CustomThumb = ({index, children}: {index: number; children: React.ReactNode}) => {
+const MARKS = [-100, -50, 0, 50, 100];
+
+export const SliderMarks: SliderStory = props => (
+  <Slider
+    {...props}
+    aria-label="Balance"
+    defaultValue={0}
+    minValue={-100}
+    maxValue={100}
+    snapPoints={MARKS}
+    style={{position: 'relative', width: 300}}>
+    <SliderOutput />
+    <SliderTrack style={{position: 'relative', height: 30, width: '100%'}}>
+      <div
+        style={{position: 'absolute', backgroundColor: 'gray', height: 3, top: 13, width: '100%'}}
+      />
+      {MARKS.map(value => (
+        <SliderMark key={value} value={value} style={{top: 14}}>
+          {({isHovered}) => (
+            <>
+              <div style={{width: 2, height: 10, backgroundColor: 'gray'}} />
+              <span
+                style={{
+                  position: 'absolute',
+                  top: 12,
+                  left: '50%',
+                  transform: 'translateX(-50%)',
+                  fontSize: 12,
+                  textDecoration: isHovered ? 'underline' : undefined
+                }}>
+                {value}
+              </span>
+            </>
+          )}
+        </SliderMark>
+      ))}
+      <CustomThumb index={0} />
+    </SliderTrack>
+  </Slider>
+);
+
+SliderMarks.args = {
+  isDisabled: false,
+  snapThreshold: 0.03
+};
+
+const CustomThumb = ({index, children}: {index: number; children?: React.ReactNode}) => {
   return (
     <SliderThumb
       index={index}
diff --git a/packages/react-aria-components/test/Slider.test.js b/packages/react-aria-components/test/Slider.test.js
index aa40ce9b5a0..201ce37efa9 100644
--- a/packages/react-aria-components/test/Slider.test.js
+++ b/packages/react-aria-components/test/Slider.test.js
@@ -17,6 +17,7 @@ import {
   Slider,
   SliderContext,
   SliderFill,
+  SliderMark,
   SliderOutput,
   SliderThumb,
   SliderTrack
@@ -456,4 +457,133 @@ describe('Slider', () => {
     );
     expect(fill).toHaveStyle({position: 'absolute', bottom: '50%', height: '30%', width: '100%'});
   });
+
+  describe('SliderMark', () => {
+    let renderMarks = (sliderProps = {}, markProps, markValues = [0, 25, 50]) => {
+      let values = [].concat(sliderProps.defaultValue ?? 0);
+      return render(
+        <Slider defaultValue={0} {...sliderProps}>
+          <Label>Opacity</Label>
+          <SliderTrack>
+            {markValues.map(value => (
+              <SliderMark key={value} value={value} {...markProps}>
+                {value}
+              </SliderMark>
+            ))}
+            {values.map((_, i) => (
+              <SliderThumb key={i} index={i} aria-label={`thumb ${i}`} />
+            ))}
+          </SliderTrack>
+        </Slider>
+      );
+    };
+
+    it('should render marks positioned along the track', () => {
+      let {getByRole} = renderMarks();
+      let marks = getByRole('group').querySelectorAll('.react-aria-SliderMark');
+
+      expect(marks).toHaveLength(3);
+      expect(marks[1]).toHaveTextContent('25');
+      expect(marks[1]).toHaveAttribute('data-orientation', 'horizontal');
+      expect(marks[1]).toHaveStyle({
+        position: 'absolute',
+        left: '25%',
+        transform: 'translate(-50%, -50%)'
+      });
+    });
+
+    it('should position marks from the end when vertical', () => {
+      let {getByRole} = renderMarks({orientation: 'vertical'});
+      let marks = getByRole('group').querySelectorAll('.react-aria-SliderMark');
+
+      expect(marks[1]).toHaveAttribute('data-orientation', 'vertical');
+      expect(marks[1]).toHaveStyle({position: 'absolute', top: '75%'});
+    });
+
+    it('should support render props', () => {
+      let {getByRole} = renderMarks(
+        {},
+        {className: ({value, isDisabled}) => `mark-${value} ${isDisabled ? 'disabled' : ''}`.trim()}
+      );
+      let marks = getByRole('group').querySelectorAll('[class^="mark-"]');
+
+      expect(marks[1]).toHaveClass('mark-25');
+    });
+
+    it('should move the nearest thumb to the mark value when pressed', () => {
+      let onChange = jest.fn();
+      let onChangeEnd = jest.fn();
+      let {getByRole} = renderMarks({onChange, onChangeEnd});
+      let marks = getByRole('group').querySelectorAll('.react-aria-SliderMark');
+
+      fireEvent.mouseDown(marks[2]);
+      expect(getByRole('slider')).toHaveValue('50');
+      expect(onChange).toHaveBeenCalledWith(50);
+      expect(onChangeEnd).toHaveBeenCalledWith(50);
+    });
+
+    it('should not let the track handle a press on a mark', () => {
+      let {getByRole} = renderMarks({}, {style: {width: 200}});
+      let marks = getByRole('group').querySelectorAll('.react-aria-SliderMark');
+
+      // The track has no layout in JSDOM, so if it handled the press the thumb would land on 0.
+      fireEvent.mouseDown(marks[1]);
+      expect(getByRole('slider')).toHaveValue('25');
+    });
+
+    it('should move the closest of multiple thumbs', () => {
+      let {getAllByRole, getByRole} = renderMarks({defaultValue: [10, 80]});
+      let marks = getByRole('group').querySelectorAll('.react-aria-SliderMark');
+      let sliders = getAllByRole('slider');
+
+      fireEvent.mouseDown(marks[2]);
+      expect(sliders[0]).toHaveValue('10');
+      expect(sliders[1]).toHaveValue('50');
+    });
+
+    it('should round a mark that is not a snap point to the nearest step', () => {
+      let onChange = jest.fn();
+      let {getByRole} = renderMarks({onChange, step: 5}, undefined, [12.5]);
+
+      fireEvent.mouseDown(getByRole('group').querySelector('.react-aria-SliderMark'));
+      expect(onChange).toHaveBeenCalledWith(15);
+    });
+
+    it('should land exactly on a mark that is also a snap point', () => {
+      let onChange = jest.fn();
+      let {getByRole} = renderMarks({onChange, step: 5, snapPoints: [12.5]}, undefined, [12.5]);
+
+      fireEvent.mouseDown(getByRole('group').querySelector('.react-aria-SliderMark'));
+      expect(onChange).toHaveBeenCalledWith(12.5);
+    });
+
+    it('should do nothing when the slider is disabled', () => {
+      let onChange = jest.fn();
+      let {getByRole} = renderMarks({onChange, isDisabled: true});
+      let marks = getByRole('group').querySelectorAll('.react-aria-SliderMark');
+
+      expect(marks[1]).toHaveAttribute('data-disabled', 'true');
+      fireEvent.mouseDown(marks[1]);
+      expect(onChange).not.toHaveBeenCalled();
+    });
+
+    it('should support hover state', async () => {
+      let onHoverChange = jest.fn();
+      let {getByRole} = renderMarks(
+        {},
+        {onHoverChange, className: ({isHovered}) => (isHovered ? 'mark hovered' : 'mark')}
+      );
+      let mark = getByRole('group').querySelector('.mark');
+
+      expect(mark).not.toHaveAttribute('data-hovered');
+
+      await user.hover(mark);
+      expect(mark).toHaveAttribute('data-hovered', 'true');
+      expect(mark).toHaveClass('hovered');
+      expect(onHoverChange).toHaveBeenCalledWith(true);
+
+      await user.unhover(mark);
+      expect(mark).not.toHaveAttribute('data-hovered');
+    });
+  });
 });
diff --git a/packages/react-aria/src/slider/useSlider.ts b/packages/react-aria/src/slider/useSlider.ts
index 49fc9427176..bf8ae25b72a 100644
--- a/packages/react-aria/src/slider/useSlider.ts
+++ b/packages/react-aria/src/slider/useSlider.ts
@@ -80,9 +80,6 @@ export function useSlider<T extends number | number[]>(
   const reverseX = direction === 'rtl';
   const currentPosition = useRef<number | null>(null);
   const {moveProps} = useMove({
-    onMoveStart() {
-      currentPosition.current = null;
-    },
     onMove({deltaX, deltaY}) {
       if (!trackRef.current) {
         return;
@@ -137,27 +134,7 @@ export function useSlider<T extends number | number[]>(
       if (direction === 'rtl' || isVertical) {
         percent = 1 - percent;
       }
-      let value = state.getPercentValue(percent);
-
-      // to find the closet thumb we split the array based on the first thumb position to the "right/end" of the click.
-      let closestThumb;
-      let split = state.values.findIndex(v => value - v < 0);
-      if (split === 0) {
-        // If the index is zero then the closetThumb is the first one
-        closestThumb = split;
-      } else if (split === -1) {
-        // If no index is found they've clicked past all the thumbs
-        closestThumb = state.values.length - 1;
-      } else {
-        let lastLeft = state.values[split - 1];
-        let firstRight = state.values[split];
-        // Pick the last left/start thumb, unless they are stacked on top of each other, then pick the right/end one
-        if (Math.abs(lastLeft - value) < Math.abs(firstRight - value)) {
-          closestThumb = split - 1;
-        } else {
-          closestThumb = split;
-        }
-      }
+      let closestThumb = state.getClosestThumbIndex(state.getPercentValue(percent));
 
       // Confirm that the found closest thumb is editable, not disabled, and move it
       if (closestThumb >= 0 && state.isThumbEditable(closestThumb)) {
@@ -167,15 +144,19 @@ export function useSlider<T extends number | number[]>(
         realTimeTrackDraggingIndex.current = closestThumb;
         state.setFocusedThumb(closestThumb);
         currentPointer.current = id;
+        // Track the pointer rather than the thumb, so that the rest of the drag stays under the
+        // cursor even when the value was adjusted to fit the step or a snap point.
+        currentPosition.current = clamp(percent, 0, 1) * size;
 
         state.setThumbDragging(realTimeTrackDraggingIndex.current!, true);
-        state.setThumbValue(closestThumb, value);
+        state.setThumbPercent(closestThumb, percent);
 
         addGlobalListener(window, 'mouseup', onUpTrack, false);
         addGlobalListener(window, 'touchend', onUpTrack, false);
         addGlobalListener(window, 'pointerup', onUpTrack, false);
       } else {
         realTimeTrackDraggingIndex.current = null;
+        currentPosition.current = null;
       }
     }
   };
diff --git a/packages/react-aria/test/slider/useSlider.test.js b/packages/react-aria/test/slider/useSlider.test.js
index 22b4a8519f6..2c0e9a7b374 100644
--- a/packages/react-aria/test/slider/useSlider.test.js
+++ b/packages/react-aria/test/slider/useSlider.test.js
@@ -146,6 +146,27 @@ describe('useSlider', () => {
       expect(stateRef.current.values).toEqual([40, 80]);
     });
 
+    it('should snap to snapPoints when clicking and dragging on the track', () => {
+      let onChangeSpy = jest.fn();
+      render(
+        <Example onChange={onChangeSpy} aria-label="Slider" defaultValue={[10]} snapPoints={[50]} />
+      );
+
+      // The track is 100px wide, so the default threshold of 2% reaches roughly 2px either side.
+      let track = screen.getByTestId('track');
+      fireEvent.mouseDown(track, {clientX: 49, pageX: 49});
+      expect(onChangeSpy).toHaveBeenLastCalledWith([50]);
+
+      fireEvent.mouseMove(track, {clientX: 51, pageX: 51});
+      expect(onChangeSpy).toHaveBeenLastCalledWith([50]);
+
+      // Dragging out of range picks up where the pointer is, not where the snap left the thumb.
+      fireEvent.mouseMove(track, {clientX: 55, pageX: 55});
+      expect(onChangeSpy).toHaveBeenLastCalledWith([55]);
+
+      fireEvent.mouseUp(track, {clientX: 55, pageX: 55});
+    });
+
     it('should not allow you to set value if disabled', () => {
       let onChangeSpy = jest.fn();
       let onChangeEndSpy = jest.fn();
diff --git a/packages/react-stately/src/slider/useSliderState.ts b/packages/react-stately/src/slider/useSliderState.ts
index ccc1d755665..78974d76737 100644
--- a/packages/react-stately/src/slider/useSliderState.ts
+++ b/packages/react-stately/src/slider/useSliderState.ts
@@ -47,6 +47,17 @@ export interface SliderProps<T = number | number[]>
    * @default 1
    */
   step?: number;
+  /**
+   * A list of values that a thumb magnetically snaps to while dragging or clicking with a pointer.
+   * Values in between remain reachable, and keyboard interactions are unaffected.
+   */
+  snapPoints?: number[];
+  /**
+   * How close a pointer must be to a snap point for it to snap, as a fraction of the track length.
+   *
+   * @default 0.02
+   */
+  snapThreshold?: number;
 }
 
 export interface SliderState {
@@ -157,6 +168,14 @@ export interface SliderState {
    */
   getPercentValue(percent: number): number;
 
+  /**
+   * Returns the index of the thumb nearest to the given value. When two thumbs are
+   * stacked on the same value, the one after the value is returned.
+   *
+   * @param value
+   */
+  getClosestThumbIndex(value: number): number;
+
   /**
    * Returns if the specified thumb is editable.
    *
@@ -201,6 +220,7 @@ export interface SliderState {
 const DEFAULT_MIN_VALUE = 0;
 const DEFAULT_MAX_VALUE = 100;
 const DEFAULT_STEP_VALUE = 1;
+const DEFAULT_SNAP_THRESHOLD = 0.02;
 
 export interface SliderStateOptions<T> extends SliderProps<T> {
   numberFormatter: Intl.NumberFormat;
@@ -223,7 +243,9 @@ export function useSliderState<T extends number | number[]>(
     maxValue = DEFAULT_MAX_VALUE,
     numberFormatter: formatter,
     step = DEFAULT_STEP_VALUE,
-    orientation = 'horizontal'
+    orientation = 'horizontal',
+    snapPoints,
+    snapThreshold = DEFAULT_SNAP_THRESHOLD
   } = props;
 
   // Page step should be at least equal to step and always a multiple of the step.
@@ -294,17 +316,24 @@ export function useSliderState<T extends number | number[]>(
     isEditablesRef.current[index] = editable;
   }
 
-  function updateValue(index: number, value: number) {
+  function commitValue(index: number, value: number) {
     if (isDisabled || !isThumbEditable(index)) {
       return;
     }
-    const thisMin = getThumbMinValue(index);
-    const thisMax = getThumbMaxValue(index);
+    let newValues = replaceIndex(
+      valuesRef.current,
+      index,
+      clamp(value, getThumbMinValue(index), getThumbMaxValue(index))
+    );
+    setValues(newValues);
+  }
 
+  function updateValue(index: number, value: number) {
     // Round value to multiple of step, clamp value between min and max
-    value = snapValueToStep(value, thisMin, thisMax, step);
-    let newValues = replaceIndex(valuesRef.current, index, value);
-    setValues(newValues);
+    commitValue(
+      index,
+      snapValueToStep(value, getThumbMinValue(index), getThumbMaxValue(index), step)
+    );
   }
 
   function updateDragging(index: number, dragging: boolean) {
@@ -356,8 +385,50 @@ export function useSliderState<T extends number | number[]>(
     }
   }
 
+  // Pointer interactions run through percentages, so snapping is applied here rather than in
+  // updateValue. That leaves keyboard interactions, which move by step, unaffected.
   function setThumbPercent(index: number, percent: number) {
-    updateValue(index, getPercentValue(percent));
+    let snapPoint = getSnapPoint(percent);
+    if (snapPoint != null) {
+      commitValue(index, snapPoint);
+    } else {
+      updateValue(index, getPercentValue(percent));
+    }
+  }
+
+  function getSnapPoint(percent: number) {
+    if (!snapPoints || snapThreshold <= 0) {
+      return undefined;
+    }
+
+    let closest: number | undefined;
+    let closestDistance = snapThreshold;
+    for (let snapPoint of snapPoints) {
+      let distance = Math.abs(getValuePercent(snapPoint) - percent);
+      if (distance <= closestDistance) {
+        closest = snapPoint;
+        closestDistance = distance;
+      }
+    }
+
+    return closest;
+  }
+
+  function getClosestThumbIndex(value: number) {
+    // Split the array on the first thumb positioned after the value.
+    let split = values.findIndex(v => value - v < 0);
+    if (split === 0) {
+      return split;
+    }
+    if (split === -1) {
+      // The value is past all of the thumbs.
+      return values.length - 1;
+    }
+
+    // Pick the thumb before the value, unless the one after it is closer or they are stacked.
+    return Math.abs(values[split - 1] - value) < Math.abs(values[split] - value)
+      ? split - 1
+      : split;
   }
 
   function getRoundedValue(value: number) {
@@ -396,6 +467,7 @@ export function useSliderState<T extends number | number[]>(
     getThumbMinValue,
     getThumbMaxValue,
     getPercentValue,
+    getClosestThumbIndex,
     isThumbEditable,
     setThumbEditable,
     incrementThumb,
diff --git a/packages/react-stately/test/slider/useSliderState.test.js b/packages/react-stately/test/slider/useSliderState.test.js
index 5020103060f..3f874b27e6e 100644
--- a/packages/react-stately/test/slider/useSliderState.test.js
+++ b/packages/react-stately/test/slider/useSliderState.test.js
@@ -193,4 +193,93 @@ describe('useSliderState', () => {
     expect(onChangeSpy).not.toHaveBeenCalled();
     expect(onChangeEndSpy).not.toHaveBeenCalled();
   });
+
+  it('should return the closest thumb to a value', () => {
+    let result = renderHook(() =>
+      useSliderState({defaultValue: [20, 50, 80], numberFormatter})
+    ).result;
+
+    expect(result.current.getClosestThumbIndex(0)).toBe(0);
+    expect(result.current.getClosestThumbIndex(34)).toBe(0);
+    expect(result.current.getClosestThumbIndex(36)).toBe(1);
+    expect(result.current.getClosestThumbIndex(50)).toBe(1);
+    expect(result.current.getClosestThumbIndex(100)).toBe(2);
+  });
+
+  it('should return the last of two stacked thumbs as the closest', () => {
+    let result = renderHook(() => useSliderState({defaultValue: [50, 50], numberFormatter})).result;
+
+    expect(result.current.getClosestThumbIndex(50)).toBe(1);
+  });
+
+  describe('snapPoints', () => {
+    let renderSnapSlider = props =>
+      renderHook(() =>
+        useSliderState({defaultValue: [0], snapPoints: [0, 25, 50], numberFormatter, ...props})
+      ).result;
+
+    it('should snap to the nearest snap point within the threshold', () => {
+      let result = renderSnapSlider();
+
+      act(() => result.current.setThumbPercent(0, 0.49));
+      expect(result.current.getThumbValue(0)).toBe(50);
+
+      act(() => result.current.setThumbPercent(0, 0.515));
+      expect(result.current.getThumbValue(0)).toBe(50);
+    });
+
+    it('should leave values outside the threshold alone', () => {
+      let result = renderSnapSlider();
+
+      act(() => result.current.setThumbPercent(0, 0.45));
+      expect(result.current.getThumbValue(0)).toBe(45);
+
+      act(() => result.current.setThumbPercent(0, 0.56));
+      expect(result.current.getThumbValue(0)).toBe(56);
+    });
+
+    it('should pick the closest snap point when two are in range', () => {
+      let result = renderSnapSlider({snapPoints: [49, 51], snapThreshold: 0.5});
+
+      act(() => result.current.setThumbPercent(0, 0.4));
+      expect(result.current.getThumbValue(0)).toBe(49);
+
+      act(() => result.current.setThumbPercent(0, 0.6));
+      expect(result.current.getThumbValue(0)).toBe(51);
+    });
+
+    it('should snap to points that are not multiples of step', () => {
+      let result = renderSnapSlider({snapPoints: [12.5], step: 5});
+
+      act(() => result.current.setThumbPercent(0, 0.13));
+      expect(result.current.getThumbValue(0)).toBe(12.5);
+    });
+
+    it('should keep snapped values within the thumb bounds', () => {
+      let result = renderSnapSlider({defaultValue: [0, 40], snapPoints: [50]});
+
+      act(() => result.current.setThumbPercent(0, 0.5));
+      expect(result.current.values).toEqual([40, 40]);
+    });
+
+    it('should not affect keyboard interactions', () => {
+      let result = renderSnapSlider({defaultValue: [45]});
+
+      act(() => result.current.incrementThumb(0));
+      expect(result.current.getThumbValue(0)).toBe(46);
+
+      act(() => result.current.setThumbValue(0, 49));
+      expect(result.current.getThumbValue(0)).toBe(49);
+
+      act(() => result.current.decrementThumb(0));
+      expect(result.current.getThumbValue(0)).toBe(48);
+    });
+
+    it('should not snap when snapThreshold is 0', () => {
+      let result = renderSnapSlider({snapThreshold: 0});
+
+      act(() => result.current.setThumbPercent(0, 0.49));
+      expect(result.current.getThumbValue(0)).toBe(49);
+    });
+  });
 });
diff --git a/starters/docs/src/Slider.css b/starters/docs/src/Slider.css
index 866393515bf..dd143fb2c9f 100644
--- a/starters/docs/src/Slider.css
+++ b/starters/docs/src/Slider.css
@@ -40,6 +40,41 @@
     }
   }
 
+  .react-aria-SliderMark {
+    display: flex;
+    align-items: center;
+    cursor: pointer;
+
+    .tick {
+      display: block;
+      background: var(--border-color);
+      border-radius: 9999px;
+    }
+
+    .tick-label {
+      position: absolute;
+      font-size: var(--font-size-sm);
+      color: var(--gray-800);
+      white-space: nowrap;
+    }
+
+    &[data-hovered] .tick-label {
+      color: var(--text-color);
+    }
+
+    &[data-disabled] {
+      cursor: default;
+
+      .tick {
+        background: var(--border-color-disabled);
+      }
+
+      .tick-label {
+        color: var(--text-color-disabled);
+      }
+    }
+  }
+
   .react-aria-SliderThumb {
     width: calc(var(--spacing) * 5.5);
     height: calc(var(--spacing) * 5.5);
@@ -92,6 +127,25 @@
     .react-aria-SliderThumb {
       top: 50%;
     }
+
+    .react-aria-SliderMark {
+      top: 50%;
+
+      .tick {
+        width: 2px;
+        height: var(--spacing-2);
+      }
+
+      .tick-label {
+        top: calc(100% + var(--spacing-1));
+        left: 50%;
+        transform: translateX(-50%);
+      }
+    }
+
+    .react-aria-SliderTrack:has(.react-aria-SliderMark) {
+      margin-bottom: var(--spacing-5);
+    }
   }
 
   &[data-orientation='vertical'] {
@@ -139,6 +193,21 @@
     .react-aria-SliderThumb {
       left: 50%;
     }
+
+    .react-aria-SliderMark {
+      left: 50%;
+
+      .tick {
+        width: var(--spacing-2);
+        height: 2px;
+      }
+
+      .tick-label {
+        left: calc(100% + var(--spacing-1));
+        top: 50%;
+        transform: translateY(-50%);
+      }
+    }
   }
 
   &[data-disabled] {
diff --git a/starters/docs/src/Slider.tsx b/starters/docs/src/Slider.tsx
index b0881f61716..7527ea639a5 100644
--- a/starters/docs/src/Slider.tsx
+++ b/starters/docs/src/Slider.tsx
@@ -1,6 +1,7 @@
 'use client';
 import {
   Slider as AriaSlider,
+  SliderMark,
   SliderOutput,
   type SliderProps as AriaSliderProps,
   SliderThumb,
@@ -21,12 +22,15 @@ export interface SliderProps<T> extends AriaSliderProps<T> {
    * @default 0
    */
   fillOffset?: number;
+  /** Values to render tick marks at along the track. */
+  marks?: number[];
 }
 
 export function Slider<T extends number | number[]>({
   label,
   thumbLabels,
   fillOffset,
+  marks,
   ...props
 }: SliderProps<T>) {
   return (
@@ -39,6 +43,12 @@ export function Slider<T extends number | number[]>({
             <div className="track inset" data-disabled={isDisabled || undefined}>
               <SliderFill offset={fillOffset} />
             </div>
+            {marks?.map(value => (
+              <SliderMark key={value} value={value}>
+                <span className="tick" />
+                <span className="tick-label">{state.getFormattedValue(value)}</span>
+              </SliderMark>
+            ))}
             {state.values.map((_, i) => (
               <SliderThumb
                 key={i}

From ce6222c9f4fc69c6bf9a9ac0626c5fbbfdd17b37 Mon Sep 17 00:00:00 2001
From: varun2735126 <varun2735126@gmail.com>
Date: Sun, 23 Aug 2026 20:09:24 +0530
Subject: [PATCH 2/3] docs(slider): show the macOS volume slider from the issue
 in the story
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The story now mirrors the reference in adobe/react-spectrum#8285 — ticks drawn
across the track, a pill thumb that goes translucent while dragging, and a live
value readout — with the labelled variant kept as a second story.

Nothing was added to the API to build it: isDragging and isHovered are existing
thumb render props and SliderOutput already reads the live value.
---
 .../dev/s2-docs/pages/react-aria/Slider.mdx   |  2 +
 .../stories/Slider.stories.tsx                | 68 +++++++++++++++++--
 2 files changed, 66 insertions(+), 4 deletions(-)

diff --git a/packages/dev/s2-docs/pages/react-aria/Slider.mdx b/packages/dev/s2-docs/pages/react-aria/Slider.mdx
index 0dc63878da9..1b867f1faf8 100644
--- a/packages/dev/s2-docs/pages/react-aria/Slider.mdx
+++ b/packages/dev/s2-docs/pages/react-aria/Slider.mdx
@@ -139,6 +139,8 @@ Keyboard interactions are deliberately unaffected — arrow keys continue to mov
 
 Snap points do not have to be multiples of `step`. A value such as `0` on a slider that steps by 25 is only reachable with a pointer.
 
+Marks and snap points cover the harder cases too. A macOS-style volume slider — ticks drawn across the track, a thumb that goes translucent while dragging, and a value readout that follows it — needs no other API: the thumb already exposes `isDragging` and `isHovered` as render props, and `SliderOutput` reads the live value. See the `SliderMarks` story for a worked example.
+
 ## Examples
 
 <ExampleList tag="slider" pages={props.pages} />
diff --git a/packages/react-aria-components/stories/Slider.stories.tsx b/packages/react-aria-components/stories/Slider.stories.tsx
index 3b32023bdb6..775c3a9e29d 100644
--- a/packages/react-aria-components/stories/Slider.stories.tsx
+++ b/packages/react-aria-components/stories/Slider.stories.tsx
@@ -103,23 +103,83 @@ SliderCSS.argTypes = {
   }
 };
 
-const MARKS = [-100, -50, 0, 50, 100];
+// Seven ticks over six intervals, matching the macOS Sound output volume slider that
+// https://github.com/adobe/react-spectrum/issues/8285 asks for.
+const VOLUME_TICKS = [0, 100 / 6, 200 / 6, 50, 400 / 6, 500 / 6, 100];
 
 export const SliderMarks: SliderStory = props => (
+  <Slider
+    {...props}
+    aria-label="Volume"
+    defaultValue={70}
+    snapPoints={VOLUME_TICKS}
+    style={{display: 'flex', alignItems: 'center', gap: 10, width: 360}}>
+    <SliderTrack
+      style={{position: 'relative', flex: 1, height: 22, display: 'flex', alignItems: 'center'}}>
+      <div
+        style={{
+          position: 'absolute',
+          left: 0,
+          right: 0,
+          height: 4,
+          background: '#d4d4d4',
+          borderRadius: 2
+        }}
+      />
+      {VOLUME_TICKS.map((value, i) => (
+        <SliderMark key={i} value={value}>
+          {({isHovered}) => (
+            <div
+              style={{
+                width: 2,
+                height: 11,
+                borderRadius: 1,
+                background: isHovered ? '#8a8a8a' : '#bdbdbd'
+              }}
+            />
+          )}
+        </SliderMark>
+      ))}
+      <SliderThumb
+        style={({isDragging}) => ({
+          width: 11,
+          height: 22,
+          top: '50%',
+          borderRadius: 5.5,
+          // The thumb goes translucent while dragging, as the macOS slider does.
+          background: isDragging ? 'rgba(255, 255, 255, 0.45)' : '#fff',
+          boxShadow: isDragging
+            ? '0 0 0 0.5px rgba(0, 0, 0, 0.09)'
+            : '0 0 0 0.5px rgba(0, 0, 0, 0.18), 0 1px 3px rgba(0, 0, 0, 0.28)'
+        })}
+      />
+    </SliderTrack>
+    <SliderOutput style={{width: 40, textAlign: 'end', fontVariantNumeric: 'tabular-nums'}} />
+  </Slider>
+);
+
+SliderMarks.args = {
+  isDisabled: false,
+  snapThreshold: 0.02
+};
+
+const LABELLED_MARKS = [-100, -50, 0, 50, 100];
+
+export const SliderMarksWithLabels: SliderStory = props => (
   <Slider
     {...props}
     aria-label="Balance"
     defaultValue={0}
     minValue={-100}
     maxValue={100}
-    snapPoints={MARKS}
+    snapPoints={LABELLED_MARKS}
     style={{position: 'relative', width: 300}}>
     <SliderOutput />
     <SliderTrack style={{position: 'relative', height: 30, width: '100%'}}>
       <div
         style={{position: 'absolute', backgroundColor: 'gray', height: 3, top: 13, width: '100%'}}
       />
-      {MARKS.map(value => (
+      {LABELLED_MARKS.map(value => (
         <SliderMark key={value} value={value} style={{top: 14}}>
           {({isHovered}) => (
             <>
@@ -144,7 +204,7 @@ export const SliderMarks: SliderStory = props => (
   </Slider>
 );
 
-SliderMarks.args = {
+SliderMarksWithLabels.args = {
   isDisabled: false,
   snapThreshold: 0.03
 };

From 48c554812cf3b180be2562f21a73281add6c12a7 Mon Sep 17 00:00:00 2001
From: varun2735126 <varun2735126@gmail.com>
Date: Mon, 24 Aug 2026 23:18:38 +0530
Subject: [PATCH 3/3] chore(slider): sync starter CSS to the hooks starter

starters/*/src/*.css are kept byte-identical by scripts/syncStarterCss.mjs, and
both the typecheck-docs and s2-docs CI jobs gate on it via check-starter-css.
---
 starters/hooks/src/Slider.css | 69 +++++++++++++++++++++++++++++++++++
 1 file changed, 69 insertions(+)

diff --git a/starters/hooks/src/Slider.css b/starters/hooks/src/Slider.css
index 866393515bf..dd143fb2c9f 100644
--- a/starters/hooks/src/Slider.css
+++ b/starters/hooks/src/Slider.css
@@ -40,6 +40,41 @@
     }
   }
 
+  .react-aria-SliderMark {
+    display: flex;
+    align-items: center;
+    cursor: pointer;
+
+    .tick {
+      display: block;
+      background: var(--border-color);
+      border-radius: 9999px;
+    }
+
+    .tick-label {
+      position: absolute;
+      font-size: var(--font-size-sm);
+      color: var(--gray-800);
+      white-space: nowrap;
+    }
+
+    &[data-hovered] .tick-label {
+      color: var(--text-color);
+    }
+
+    &[data-disabled] {
+      cursor: default;
+
+      .tick {
+        background: var(--border-color-disabled);
+      }
+
+      .tick-label {
+        color: var(--text-color-disabled);
+      }
+    }
+  }
+
   .react-aria-SliderThumb {
     width: calc(var(--spacing) * 5.5);
     height: calc(var(--spacing) * 5.5);
@@ -92,6 +127,25 @@
     .react-aria-SliderThumb {
       top: 50%;
     }
+
+    .react-aria-SliderMark {
+      top: 50%;
+
+      .tick {
+        width: 2px;
+        height: var(--spacing-2);
+      }
+
+      .tick-label {
+        top: calc(100% + var(--spacing-1));
+        left: 50%;
+        transform: translateX(-50%);
+      }
+    }
+
+    .react-aria-SliderTrack:has(.react-aria-SliderMark) {
+      margin-bottom: var(--spacing-5);
+    }
   }
 
   &[data-orientation='vertical'] {
@@ -139,6 +193,21 @@
     .react-aria-SliderThumb {
       left: 50%;
     }
+
+    .react-aria-SliderMark {
+      left: 50%;
+
+      .tick {
+        width: var(--spacing-2);
+        height: 2px;
+      }
+
+      .tick-label {
+        left: calc(100% + var(--spacing-1));
+        top: 50%;
+        transform: translateY(-50%);
+      }
+    }
   }
 
   &[data-disabled] {