@symbiote-native/slider 0.1.0

package/src/angular/slider/slider.test.ts

@@ -0,0 +1,260 @@
+// Co-located Angular-driven test (ADR 0025) for the @symbiote-native/slider Angular wrapper. The native
+// RNCSlider carries no symbiote metadata — the engine DERIVES its events + tint processors from an
+// injected codegen-shaped ViewConfig (the same shape the React/Vue adapters' slider.test inject,
+// the same shape RN's ReactNativeViewConfigRegistry holds on a real host). We import the Slider
+// component from '.' (NOT the package barrel) so the third-party native-spec side-effect
+// (../register) never loads headless. Proves: the wrapper paints the raw RNCSlider leaf inside
+// its centering View, folds value/disabled/limits faithfully to the library, forwards + processes
+// the tints, and maps the native value/sliding/accessibility-action events onto the
+// valueChange/slidingStart/slidingComplete/accessibilityAction outputs.
+
+import '@angular/compiler';
+import { Component, Input } from '@angular/core';
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
+import { mount, unmount, setNativeViewConfigSource } from '@symbiote-native/angular';
+import { clearGlobalStyles, registerStyles } from '@symbiote-native/engine';
+import { installFabric, type IFakeNode } from '@symbiote-native/test-utils';
+import { Slider } from '.';
+
+const ROOT_TAG = 312;
+const SLIDER_VIEW = 'RNCSlider';
+
+const fakeColor = (value: unknown): string => `processed(${value})`;
+
+// The codegen-shaped config the engine derives from: both value rails (bubbling), the two sliding
+// rails + accessibility (direct), plain pass-through attributes, and the tint processors.
+const RNC_SLIDER_VIEW_CONFIG = {
+  bubblingEventTypes: {
+    topChange: { phasedRegistrationNames: { bubbled: 'onChange', captured: 'onChangeCapture' } },
+    topRNCSliderValueChange: {
+      phasedRegistrationNames: {
+        bubbled: 'onRNCSliderValueChange',
+        captured: 'onRNCSliderValueChangeCapture',
+      },
+    },
+  },
+  directEventTypes: {
+    topRNCSliderSlidingStart: { registrationName: 'onRNCSliderSlidingStart' },
+    topRNCSliderSlidingComplete: { registrationName: 'onRNCSliderSlidingComplete' },
+    topRNCSliderAccessibilityAction: { registrationName: 'onRNCSliderAccessibilityAction' },
+  },
+  validAttributes: {
+    value: true,
+    minimumValue: true,
+    maximumValue: true,
+    step: true,
+    lowerLimit: true,
+    upperLimit: true,
+    inverted: true,
+    disabled: true,
+    minimumTrackTintColor: { process: fakeColor },
+    maximumTrackTintColor: { process: fakeColor },
+    thumbTintColor: { process: fakeColor },
+  },
+};
+
+const fabric = installFabric();
+setNativeViewConfigSource(name => (name === SLIDER_VIEW ? RNC_SLIDER_VIEW_CONFIG : undefined));
+
+const tick = (): Promise<void> => new Promise(resolve => setTimeout(resolve, 0));
+
+let capturedHost: SliderHost | undefined;
+
+@Component({
+  selector: 'symbiote-slider-host',
+  standalone: true,
+  imports: [Slider],
+  template: `
+    <Slider
+      [value]="value"
+      [minimumValue]="minimumValue"
+      [maximumValue]="maximumValue"
+      [step]="step"
+      [lowerLimit]="lowerLimit"
+      [upperLimit]="upperLimit"
+      [disabled]="disabled"
+      [minimumTrackTintColor]="minimumTrackTintColor"
+      [maximumTrackTintColor]="maximumTrackTintColor"
+      [thumbTintColor]="thumbTintColor"
+      [accessibilityState]="accessibilityState"
+      [renderStepNumber]="renderStepNumber"
+      (valueChange)="onValueChange($event)"
+      (slidingStart)="onSlidingStart($event)"
+      (slidingComplete)="onSlidingComplete($event)"
+      (accessibilityAction)="onAccessibilityAction($event)"
+    />
+  `,
+})
+class SliderHost {
+  @Input() value?: number;
+  @Input() minimumValue?: number;
+  @Input() maximumValue?: number;
+  @Input() step?: number;
+  @Input() lowerLimit?: number;
+  @Input() upperLimit?: number;
+  @Input() disabled?: boolean;
+  @Input() minimumTrackTintColor?: string;
+  @Input() maximumTrackTintColor?: string;
+  @Input() thumbTintColor?: string;
+  @Input() accessibilityState?: { disabled?: boolean };
+  @Input() renderStepNumber?: boolean;
+
+  onValueChange = vi.fn();
+  onSlidingStart = vi.fn();
+  onSlidingComplete = vi.fn();
+  onAccessibilityAction = vi.fn();
+
+  constructor() {
+    // Captures the live component instance so the test can drive its signals after mount.
+    // eslint-disable-next-line @typescript-eslint/no-this-alias
+    capturedHost = this;
+  }
+}
+
+beforeEach(() => {
+  capturedHost = undefined;
+  fabric.reset();
+});
+afterEach(() => unmount(ROOT_TAG));
+
+function sliderNode(): IFakeNode {
+  const node = fabric.find(n => n.viewName === SLIDER_VIEW);
+  if (!node) throw new Error(`no ${SLIDER_VIEW} was created`);
+  return node;
+}
+
+async function mountSlider(initialProps: Record<string, unknown>): Promise<void> {
+  mount(ROOT_TAG, SliderHost, { initialProps });
+  await tick();
+}
+
+describe('Angular Slider wrapper', () => {
+  it('paints the raw RNCSlider leaf inside a centering wrapper View', async () => {
+    await mountSlider({ value: 0.5, minimumValue: 0, maximumValue: 1, step: 0.1 });
+    const props = sliderNode().props;
+    expect(props.value).toBe(0.5);
+    expect(props.minimumValue).toBe(0);
+    expect(props.maximumValue).toBe(1);
+    expect(props.step).toBe(0.1);
+    // The native leaf lives under a symbiote-view wrapper (RCTView), not at the root.
+    expect(fabric.find(n => n.viewName === 'RCTView')).toBeDefined();
+  });
+
+  it('defaults range + limits the way the library wrapper does', async () => {
+    await mountSlider({ value: 0.3 });
+    const props = sliderNode().props;
+    expect(props.minimumValue).toBe(0);
+    expect(props.maximumValue).toBe(1);
+    expect(props.step).toBe(0);
+    expect(props.lowerLimit).toBe(Number.MIN_SAFE_INTEGER);
+    expect(props.upperLimit).toBe(Number.MAX_SAFE_INTEGER);
+    expect(props.inverted).toBe(false);
+    expect(props.disabled).toBe(false);
+  });
+
+  it('sanitizes a falsy/NaN value to undefined (library passedValue quirk)', async () => {
+    await mountSlider({ value: 0 });
+    expect(sliderNode().props.value).toBeUndefined();
+    unmount(ROOT_TAG);
+    fabric.reset();
+    await mountSlider({ value: Number.NaN });
+    expect(sliderNode().props.value).toBeUndefined();
+  });
+
+  it('forwards tint props and runs them through the derived processor', async () => {
+    await mountSlider({
+      value: 0.2,
+      minimumTrackTintColor: '#ff0000',
+      maximumTrackTintColor: '#00ff00',
+      thumbTintColor: '#0000ff',
+    });
+    const props = sliderNode().props;
+    expect(props.minimumTrackTintColor).toBe('processed(#ff0000)');
+    expect(props.maximumTrackTintColor).toBe('processed(#00ff00)');
+    expect(props.thumbTintColor).toBe('processed(#0000ff)');
+  });
+
+  it('maps both native value rails onto the valueChange output', async () => {
+    await mountSlider({ value: 0.2 });
+    const node = sliderNode();
+    fabric.fireEvent(node.instanceHandle, 'topChange', { value: 0.7 });
+    expect(capturedHost?.onValueChange).toHaveBeenCalledWith(0.7);
+    fabric.fireEvent(node.instanceHandle, 'topRNCSliderValueChange', { value: 0.42 });
+    expect(capturedHost?.onValueChange).toHaveBeenCalledWith(0.42);
+  });
+
+  it('maps the direct sliding events onto their outputs', async () => {
+    await mountSlider({ value: 0.2 });
+    const node = sliderNode();
+    fabric.fireEvent(node.instanceHandle, 'topRNCSliderSlidingStart', { value: 0.1 });
+    fabric.fireEvent(node.instanceHandle, 'topRNCSliderSlidingComplete', { value: 0.9 });
+    expect(capturedHost?.onSlidingStart).toHaveBeenCalledWith(0.1);
+    expect(capturedHost?.onSlidingComplete).toHaveBeenCalledWith(0.9);
+  });
+
+  it('maps the direct accessibility-action event onto the accessibilityAction output', async () => {
+    await mountSlider({ value: 0.2 });
+    const node = sliderNode();
+    fabric.fireEvent(node.instanceHandle, 'topRNCSliderAccessibilityAction', {
+      actionName: 'increment',
+    });
+    expect(capturedHost?.onAccessibilityAction).toHaveBeenCalledTimes(1);
+  });
+
+  it('resolves disabled from accessibilityState when no explicit boolean', async () => {
+    await mountSlider({ value: 0.2, accessibilityState: { disabled: true } });
+    expect(sliderNode().props.disabled).toBe(true);
+  });
+
+  it('renders the step indicator when renderStepNumber is set', async () => {
+    await mountSlider({
+      value: 0.5,
+      minimumValue: 0,
+      maximumValue: 1,
+      step: 0.5,
+      renderStepNumber: true,
+    });
+    const container = fabric.find(n => n.props.testID === 'StepsIndicator-Container');
+    expect(container, 'a StepsIndicator container is painted').toBeDefined();
+  });
+
+  it('does NOT leak a JS callback onto the native node as a prop', async () => {
+    await mountSlider({ value: 0.2 });
+    expect(typeof sliderNode().props.onValueChange).not.toBe('function');
+    expect('valueChange' in sliderNode().props).toBe(false);
+  });
+});
+
+// Regression test for the anchor/class bug (angular-adapter skill): Slider is its own
+// ANCHOR_HOST_COMPONENTS entry (renderer.ts) AND renders through DescriptorOutlet (itself also an
+// anchor entry) — a class= on <Slider> resolves onto Slider's OWN anchor, two levels up from the
+// real committed centering wrapper View the descriptor builds (see the "paints the raw RNCSlider
+// leaf inside a centering wrapper View" test above), and needs its OWN anchorHostStyle merge (see
+// shared.ts's `inputProps`). Mirrors the Angular adapter's pressable.test.ts "resolves a class="
+// case.
+@Component({
+  selector: 'symbiote-slider-class-host',
+  standalone: true,
+  imports: [Slider],
+  template: `<Slider class="card" [value]="0.2" />`,
+})
+class SliderClassHost {}
+
+describe('Angular Slider anchor class= resolution', () => {
+  beforeEach(() => {
+    fabric.reset();
+    registerStyles({ card: { backgroundColor: 'red' } });
+  });
+  afterEach(() => {
+    unmount(ROOT_TAG);
+    clearGlobalStyles();
+  });
+
+  it('resolves a class= on the Slider use site onto the real committed centering wrapper View', async () => {
+    mount(ROOT_TAG, SliderClassHost);
+    await tick();
+
+    const node = fabric.find(n => n.props.backgroundColor === 'red');
+    expect(node, 'a real Fabric node carries the class-derived style').toBeDefined();
+  });
+});

package/src/core/constants.ts

@@ -0,0 +1,47 @@
+// Framework-agnostic constants for the @react-native-community/slider native view, mirrored
+// from the library's own utils/constants.ts so every adapter resolves identical defaults.
+// symbiote ships zero metadata for RNCSlider at runtime — the engine derives its events and
+// color processors from the library's ViewConfig — but the JS-side defaults the library's
+// React wrapper applies (value/limit/step folding) are pure and shared here instead.
+
+// The Fabric view name the library's codegen component registers (codegenNativeComponent<…>
+// ('RNCSlider')). descriptorFor passes any non-`symbiote-` string through as a raw Fabric
+// name, so the render fn emits this directly; the engine resolves its ViewConfig on first use.
+export const RNC_SLIDER_VIEW_NAME = 'RNCSlider';
+
+// Native event prop keys the engine routes to listeners. The library's ViewConfig declares the
+// value change as BOTH a `topChange` (→ onChange) and `topRNCSliderValueChange`
+// (→ onRNCSliderValueChange) bubbling event, plus the two direct sliding events; we bind both
+// value-change keys exactly as the React wrapper does so neither host platform is missed.
+export const SLIDER_ON_CHANGE = 'onChange';
+export const SLIDER_ON_VALUE_CHANGE = 'onRNCSliderValueChange';
+export const SLIDER_ON_SLIDING_START = 'onRNCSliderSlidingStart';
+export const SLIDER_ON_SLIDING_COMPLETE = 'onRNCSliderSlidingComplete';
+export const SLIDER_ON_ACCESSIBILITY_ACTION = 'onRNCSliderAccessibilityAction';
+
+// Value/range defaults, matching the library wrapper's destructured prop defaults.
+export const SLIDER_DEFAULT_INITIAL_VALUE = 0;
+export const SLIDER_DEFAULT_MINIMUM_VALUE = 0;
+export const SLIDER_DEFAULT_MAXIMUM_VALUE = 1;
+export const SLIDER_DEFAULT_STEP = 0;
+
+// lowerLimit/upperLimit default to the native sentinel (no limit) off-web; the library uses
+// Number.MIN/MAX_SAFE_INTEGER for the unbounded case.
+export const SLIDER_LIMIT_MIN_VALUE = Number.MIN_SAFE_INTEGER;
+export const SLIDER_LIMIT_MAX_VALUE = Number.MAX_SAFE_INTEGER;
+
+// Step-indicator resolution: how many implicit steps the library lays out when `step` is 0.
+// Platform-specific in the library (android 128 / ios 1000); the adapter supplies the resolved
+// number so the core render stays platform-invariant (no Platform.OS read here).
+export const SLIDER_STEP_RESOLUTION_IOS = 1_000;
+export const SLIDER_STEP_RESOLUTION_ANDROID = 128;
+
+// iOS gives the native slider an intrinsic 40pt height; the wrapper applies it as the default.
+export const SLIDER_IOS_DEFAULT_HEIGHT = 40;
+
+// Step-indicator typography + layout, from the library's utils/styles + constants.
+export const SLIDER_STEP_NUMBER_FONT_SMALL = 8;
+export const SLIDER_STEP_NUMBER_FONT_BIG = 12;
+export const SLIDER_STEP_NUMBER_FONT_THRESHOLD = 9;
+export const SLIDER_THUMB_SIZE = 20;
+export const SLIDER_MARGIN_HORIZONTAL_PADDING = 0.05;

package/src/core/index.ts

@@ -0,0 +1,46 @@
+// @symbiote-native/slider (core): the framework-agnostic half of the @react-native-community/slider
+// wrapper. symbiote ships zero runtime metadata for RNCSlider — the engine derives its events
+// and color processors from the library's own ViewConfig — so this layer is the pure JS folding
+// the library's React wrapper does (value/limit/disabled resolution, the step-indicator layout)
+// plus the Descriptor render of the native leaf. Every adapter (`@symbiote-native/slider/vue`, and
+// `/angular`) reuses this verbatim and supplies only its lifecycle + descriptor bridge.
+// This is the third-party-native-view track foreseen by ADR 0014; see ADR 0027.
+
+export * from './constants';
+
+export {
+  sanitizeSliderValue,
+  resolveSliderDisabled,
+  resolveSliderAccessibilityState,
+  resolveSliderLowerLimit,
+  resolveSliderUpperLimit,
+  valueFromSliderEvent,
+  computeStepOptions,
+  shouldRenderStepsIndicator,
+  resolveThumbTintColor,
+  shouldPassNativeThumbImage,
+  isInvalidLimitConfig,
+} from './slider-state';
+export type { ISliderAccessibilityState } from './slider-state';
+
+export type { ISliderProps, ISliderPlatform, ISliderViewProps } from './slider-props';
+
+export {
+  renderSlider,
+  renderSliderNative,
+  resolveSliderWrapperStyle,
+  resolveSliderNativeStyle,
+} from './render-slider';
+
+export {
+  renderStepsIndicator,
+  resolveStepsContainerStyle,
+  stepNumberFontSize,
+  orderStepOptions,
+  STEP_INDICATOR_ELEMENT_STYLE,
+  TRACK_MARK_CONTAINER_STYLE,
+  THUMB_IMAGE_CONTAINER_STYLE,
+  THUMB_IMAGE_STYLE,
+  STEP_NUMBER_CONTAINER_STYLE,
+} from './render-steps-indicator';
+export type { IStepsIndicatorParams, IStepMarkerProps } from './render-steps-indicator';

package/src/core/render-slider.ts

@@ -0,0 +1,89 @@
+// Slider: the render half (framework-agnostic). Mirrors the library's React wrapper layout: an
+// outer `symbiote-view` (default platform style + the caller's style, centered) hosting the
+// native `RNCSlider` leaf, plus an optional step-indicator overlay sibling. The native leaf
+// carries the folded value/limit/color/image props and the responder claims the wrapper does;
+// every event handler + the ref ride in `passthrough` and the engine routes them against the
+// view's derived ViewConfig. Pure and prop-driven — the adapter owns state, events, and the
+// width measurement that feeds `view.width`.
+
+import { dlog } from '@symbiote-native/engine';
+import type { IStyleProp, IViewStyle, ISymbioteEvent } from '@symbiote-native/engine';
+import { el } from '@symbiote-native/components';
+import type { IDescriptor, IDescriptorChild } from '@symbiote-native/components';
+import { RNC_SLIDER_VIEW_NAME } from './constants';
+import type { ISliderPlatform, ISliderViewProps } from './slider-props';
+
+// Extra wrapper props the adapter supplies: the pre-rendered default step overlay (placed before
+// the native leaf, matching the library's z-order) and the onLayout handler that measures the
+// width the step indicator needs. A custom StepMarker overlay is assembled per-adapter instead.
+export type ISliderRenderOptions = {
+  steps?: IDescriptor | null;
+  onLayout?: (event: ISymbioteEvent) => void;
+};
+
+// The native slider stretches to the measured wrapper width when one is given (the step indicator
+// and thumb then share one coordinate space); without it the slider sizes naturally.
+export function resolveSliderNativeStyle(
+  width: number | undefined,
+  platform: ISliderPlatform,
+): IStyleProp<IViewStyle> {
+  const base: IViewStyle = { zIndex: 1, alignContent: 'center', alignItems: 'center' };
+  const sized: IStyleProp<IViewStyle> = width === undefined ? base : [base, { width }];
+  return [platform.defaultStyle, sized];
+}
+
+// The outer wrapper centers the native slider and gives it the platform default height; the
+// caller's style layers on top, exactly as the library composes [defaultStyle, props.style]. The
+// caller's style is opaque (`unknown`) — the engine flattens the array — so it is not narrowed.
+export function resolveSliderWrapperStyle(style: unknown, platform: ISliderPlatform): unknown {
+  return [platform.defaultStyle, style, { justifyContent: 'center' }];
+}
+
+// The native `RNCSlider` leaf alone (no wrapper). Adapters that compose a custom step overlay
+// (a per-adapter StepMarker element) assemble the wrapper themselves and drop this leaf in.
+export function renderSliderNative(view: ISliderViewProps, platform: ISliderPlatform): IDescriptor {
+  dlog(
+    `Slider render value=${String(view.value)} disabled=${String(view.disabled)} width=${String(view.width)}`,
+  );
+  const props: Record<string, unknown> = {
+    // Forwarded verbatim: minimum/maximumTrackTintColor, track images, thumbSize, tapToSeek,
+    // vertical, accessibilityUnits/Increments, testID, accessibility*/aria-*, and the native
+    // event handlers the adapter wired in.
+    ...view.passthrough,
+    minimumValue: view.minimumValue,
+    maximumValue: view.maximumValue,
+    step: view.step,
+    lowerLimit: view.lowerLimit,
+    upperLimit: view.upperLimit,
+    value: view.value,
+    inverted: view.inverted,
+    disabled: view.disabled,
+    thumbTintColor: view.thumbTintColor,
+    thumbImage: view.thumbImage,
+    accessibilityState: view.accessibilityState,
+    style: resolveSliderNativeStyle(view.width, platform),
+    // The library claims the responder on the native slider so a parent ScrollView can't steal
+    // the drag, and refuses termination requests; mirrored for gesture parity.
+    onStartShouldSetResponder: () => true,
+    onResponderTerminationRequest: () => false,
+  };
+  return el(RNC_SLIDER_VIEW_NAME, props);
+}
+
+// The full slider: the centered wrapper hosting the native leaf, with an optional pre-rendered
+// step-indicator overlay before it. The default overlay (renderStepsIndicator) is passed via
+// `options.steps`; a custom StepMarker overlay is assembled per-adapter at the element level.
+export function renderSlider(
+  view: ISliderViewProps,
+  platform: ISliderPlatform,
+  options: ISliderRenderOptions = {},
+): IDescriptor {
+  const children: IDescriptorChild[] = [];
+  if (options.steps) children.push(options.steps);
+  children.push(renderSliderNative(view, platform));
+  const wrapperProps: Record<string, unknown> = {
+    style: resolveSliderWrapperStyle(view.style, platform),
+  };
+  if (options.onLayout !== undefined) wrapperProps.onLayout = options.onLayout;
+  return el('symbiote-view', wrapperProps, children);
+}

package/src/core/render-steps-indicator.ts

@@ -0,0 +1,154 @@
+// Step indicator: the row of marks the library overlays on a stepped slider. Like a list's
+// cells, each mark MAY hold the framework's own `StepMarker` element, so the overlay is shared
+// as MATH + a DEFAULT render: the layout/style/font helpers below are reused by every adapter,
+// and renderStepsIndicator paints the default overlay (empty mark containers + optional step
+// numbers + the thumbImage on the current step). An adapter with a custom StepMarker slot
+// assembles the overlay itself from these same helpers, dropping its element into each mark.
+
+import { el, txt } from '@symbiote-native/components';
+import type { IDescriptor, IDescriptorChild } from '@symbiote-native/components';
+import type { IViewStyle, ITextStyle } from '@symbiote-native/engine';
+import {
+  SLIDER_MARGIN_HORIZONTAL_PADDING,
+  SLIDER_STEP_NUMBER_FONT_BIG,
+  SLIDER_STEP_NUMBER_FONT_SMALL,
+  SLIDER_STEP_NUMBER_FONT_THRESHOLD,
+} from './constants';
+import type { ISliderPlatform } from './slider-props';
+
+// Static overlay styles, ported from the library's utils/styles (native branch only — symbiote
+// targets iOS/Android, so the web layout branches are dropped).
+export const STEP_INDICATOR_ELEMENT_STYLE: IViewStyle = {
+  alignItems: 'center',
+  alignContent: 'center',
+};
+
+export const TRACK_MARK_CONTAINER_STYLE: IViewStyle = {
+  alignItems: 'center',
+  alignContent: 'center',
+  alignSelf: 'center',
+  justifyContent: 'center',
+  position: 'absolute',
+  zIndex: 3,
+};
+
+export const THUMB_IMAGE_CONTAINER_STYLE: IViewStyle = {
+  position: 'absolute',
+  zIndex: 3,
+  justifyContent: 'center',
+  alignItems: 'center',
+  alignContent: 'center',
+};
+
+export const THUMB_IMAGE_STYLE: IViewStyle = {
+  alignContent: 'center',
+  alignItems: 'center',
+  position: 'absolute',
+};
+
+export const STEP_NUMBER_CONTAINER_STYLE: IViewStyle = {
+  marginTop: 20,
+  alignItems: 'center',
+  position: 'absolute',
+};
+
+// The mark row: flex row, evenly spaced, inset by a fraction of the measured width. `top` is
+// platform-specific (iOS nudges the row down 10pt), supplied via the platform piece.
+export function resolveStepsContainerStyle(width: number, platform: ISliderPlatform): IViewStyle {
+  return {
+    flex: 1,
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    top: platform.stepsContainerTop,
+    zIndex: 2,
+    marginHorizontal: width * SLIDER_MARGIN_HORIZONTAL_PADDING,
+  };
+}
+
+// Smaller font once there are more than 9 steps, so the labels keep fitting.
+export function stepNumberFontSize(optionsLength: number): number {
+  return optionsLength > SLIDER_STEP_NUMBER_FONT_THRESHOLD
+    ? SLIDER_STEP_NUMBER_FONT_SMALL
+    : SLIDER_STEP_NUMBER_FONT_BIG;
+}
+
+// Inverted sliders lay the marks right-to-left; copy before reversing (the helper is pure).
+export function orderStepOptions(
+  options: readonly number[],
+  inverted: boolean | undefined,
+): number[] {
+  return inverted ? [...options].reverse() : [...options];
+}
+
+// The props a custom step marker receives, framework-agnostic scalars (the library's MarkerProps).
+// Each adapter renders the marker its own way — React as an FC<IStepMarkerProps>, Vue as a scoped
+// slot — but the props it gets are identical, so the shape lives here.
+export type IStepMarkerProps = {
+  stepMarked: boolean;
+  currentValue: number;
+  index: number;
+  min: number;
+  max: number;
+};
+
+export type IStepsIndicatorParams = {
+  options: readonly number[];
+  currentValue: number;
+  width: number;
+  renderStepNumber?: boolean;
+  thumbImage?: unknown;
+  inverted?: boolean;
+  platform: ISliderPlatform;
+};
+
+// One mark cell: an absolutely-centered track-mark container (empty by default, or the
+// thumbImage on the current step) plus the optional step number label.
+function renderStepCell(
+  value: number,
+  displayIndex: number,
+  params: IStepsIndicatorParams,
+  fontSize: number,
+): IDescriptor {
+  const trackMarkChildren: IDescriptorChild[] = [];
+  if (params.thumbImage !== undefined && value === params.currentValue) {
+    trackMarkChildren.push(
+      el(
+        'symbiote-view',
+        { style: THUMB_IMAGE_CONTAINER_STYLE, testID: 'sliderTrackMark-thumbImage' },
+        [el('symbiote-image', { source: params.thumbImage, style: THUMB_IMAGE_STYLE })],
+      ),
+    );
+  }
+
+  const cellChildren: IDescriptorChild[] = [
+    el('symbiote-view', { style: TRACK_MARK_CONTAINER_STYLE }, trackMarkChildren),
+  ];
+  if (params.renderStepNumber === true) {
+    cellChildren.push(
+      el('symbiote-view', { style: STEP_NUMBER_CONTAINER_STYLE }, [
+        txt({ testID: `${displayIndex}th-step`, style: { fontSize } satisfies ITextStyle }, [
+          String(value),
+        ]),
+      ]),
+    );
+  }
+  return el('symbiote-view', { style: STEP_INDICATOR_ELEMENT_STYLE }, cellChildren);
+}
+
+// The default overlay (no custom StepMarker). pointerEvents none so it never eats the drag.
+export function renderStepsIndicator(params: IStepsIndicatorParams): IDescriptor {
+  const fontSize = stepNumberFontSize(params.options.length);
+  const ordered = orderStepOptions(params.options, params.inverted);
+  const cells = ordered.map((value, displayIndex) =>
+    renderStepCell(value, displayIndex, params, fontSize),
+  );
+  return el(
+    'symbiote-view',
+    {
+      pointerEvents: 'none',
+      testID: 'StepsIndicator-Container',
+      style: resolveStepsContainerStyle(params.width, params.platform),
+    },
+    cells,
+  );
+}

package/src/core/slider-props.ts

@@ -0,0 +1,83 @@
+// Slider prop types. Per CLAUDE.md <prop_types_split_agnostic_vs_per_adapter>: every field of
+// the slider's public surface is framework-agnostic EXCEPT the custom `StepMarker`, which is a
+// render component returning a framework element (React FC vs Vue slot) — so that one stays in
+// each adapter's own flavored prop type. ISliderProps here is the shared agnostic base every
+// adapter re-exports and extends; ISliderViewProps is the pre-resolved input the render fn paints.
+
+import type { IColorValue, IStyleProp, IViewStyle } from '@symbiote-native/engine';
+import type {
+  IAccessibilityProps,
+  IAriaProps,
+  IImageSourceProp,
+} from '@symbiote-native/components';
+import type { ISliderAccessibilityState } from './slider-state';
+
+// The agnostic public surface, shared by every adapter. Callbacks take a plain number (the
+// adapter unwraps nativeEvent.value), colors/images/style are agnostic value types. The custom
+// `StepMarker` component is deliberately absent — adapters add it to their own flavored type.
+export interface ISliderProps extends IAccessibilityProps, IAriaProps {
+  value?: number;
+  minimumValue?: number;
+  maximumValue?: number;
+  step?: number;
+  lowerLimit?: number;
+  upperLimit?: number;
+  minimumTrackTintColor?: IColorValue;
+  maximumTrackTintColor?: IColorValue;
+  thumbTintColor?: IColorValue;
+  disabled?: boolean;
+  inverted?: boolean;
+  tapToSeek?: boolean;
+  vertical?: boolean;
+  thumbImage?: IImageSourceProp;
+  minimumTrackImage?: IImageSourceProp;
+  maximumTrackImage?: IImageSourceProp;
+  trackImage?: IImageSourceProp;
+  thumbSize?: number;
+  accessibilityUnits?: string;
+  accessibilityIncrements?: readonly string[];
+  renderStepNumber?: boolean;
+  onValueChange?: (value: number) => void;
+  onSlidingStart?: (value: number) => void;
+  onSlidingComplete?: (value: number) => void;
+  testID?: string;
+  style?: IStyleProp<IViewStyle>;
+}
+
+// The per-platform piece the render needs: the iOS default 40pt height (Android leaves it to
+// the native view's intrinsic size), the step-indicator resolution fallback (ios 1000 /
+// android 128), and the step container's platform `top` offset. The adapter's .ios/.android
+// file supplies these (Metro filename-selected), keeping the render platform-invariant.
+export type ISliderPlatform = {
+  defaultStyle: IViewStyle;
+  stepResolution: number;
+  stepsContainerTop: number;
+};
+
+// Pre-resolved inputs the native render paints from. Only the fields that need FOLDING are
+// explicit here (value sanitized, disabled/accessibilityState resolved, limits defaulted, the
+// thumb tint/image resolved against the StepMarker decision); everything that just passes through
+// untouched — minimum/maximumTrackTintColor, the track images, thumbSize, tapToSeek, vertical,
+// accessibility*/testID/aria-*, AND the native event handlers — rides in `passthrough` and lands
+// on the host node verbatim (the engine routes the on*-keyed handlers and runs the ViewConfig
+// color processors). `width` is set only when a step overlay needs it, so the common case has no
+// width:0 first-paint flash.
+export type ISliderViewProps = {
+  value?: number;
+  minimumValue: number;
+  maximumValue: number;
+  step: number;
+  lowerLimit: number;
+  upperLimit: number;
+  disabled: boolean;
+  inverted: boolean;
+  thumbTintColor?: unknown;
+  thumbImage?: unknown;
+  accessibilityState?: ISliderAccessibilityState;
+  width?: number;
+  // Opaque to the render — composed into a style array the engine flattens — so kept `unknown`
+  // (object/array/registered-id all valid) rather than narrowed off attrs. The PUBLIC ISliderProps
+  // keeps the precise IStyleProp typing.
+  style?: unknown;
+  passthrough: Record<string, unknown>;
+};