@symbiote-native/slider 5.0.3 → 5.2.0

package/src/angular/slider/index.android.ts

@@ -1,7 +1,8 @@
 // Slider on Android: the native view sizes itself (no default height), lays out implicit steps at
 // 128-point resolution, and keeps the step row at the top. Mirrors the library's Android branches.
 
-import { ChangeDetectionStrategy, Component } from '@angular/core';
+import { ChangeDetectionStrategy, Component, forwardRef } from '@angular/core';
+import { NG_VALUE_ACCESSOR } from '@angular/forms';
 import { DescriptorOutlet } from '@symbiote-native/angular';
 import { SliderBase } from './shared';
 import { SLIDER_STEP_RESOLUTION_ANDROID } from '../../core';
@@ -14,6 +15,13 @@ const ANDROID_STEPS_CONTAINER_TOP = 0;
   standalone: true,
   imports: [DescriptorOutlet],
   changeDetection: ChangeDetectionStrategy.OnPush,
+  providers: [
+    {
+      provide: NG_VALUE_ACCESSOR,
+      useExisting: forwardRef(() => Slider),
+      multi: true,
+    },
+  ],
   template: `<symbiote-descriptor-outlet [node]="descriptor" />`,
 })
 export class Slider extends SliderBase {

package/src/angular/slider/index.ios.ts

@@ -2,10 +2,14 @@
 // default), lays out implicit steps at 1000-point resolution, and nudges the step row down 10pt.
 // Also the base (./index re-exports it) for headless. Mirrors the library's iOS branches.
 
-import { ChangeDetectionStrategy, Component } from '@angular/core';
+import { ChangeDetectionStrategy, Component, forwardRef } from '@angular/core';
+import { NG_VALUE_ACCESSOR } from '@angular/forms';
 import { DescriptorOutlet } from '@symbiote-native/angular';
 import { SliderBase } from './shared';
-import { SLIDER_IOS_DEFAULT_HEIGHT, SLIDER_STEP_RESOLUTION_IOS } from '../../core';
+import {
+  SLIDER_IOS_DEFAULT_HEIGHT,
+  SLIDER_STEP_RESOLUTION_IOS,
+} from '../../core';
 export type { ISliderProps } from './shared';
 
 const IOS_STEPS_CONTAINER_TOP = 10;
@@ -15,6 +19,13 @@ const IOS_STEPS_CONTAINER_TOP = 10;
   standalone: true,
   imports: [DescriptorOutlet],
   changeDetection: ChangeDetectionStrategy.OnPush,
+  providers: [
+    {
+      provide: NG_VALUE_ACCESSOR,
+      useExisting: forwardRef(() => Slider),
+      multi: true,
+    },
+  ],
   template: `<symbiote-descriptor-outlet [node]="descriptor" />`,
 })
 export class Slider extends SliderBase {

package/src/angular/slider/shared.ts

@@ -33,6 +33,7 @@ import {
   Output,
   type OnChanges,
 } from '@angular/core';
+import type { ControlValueAccessor } from '@angular/forms';
 import { anchorHostStyle } from '@symbiote-native/angular';
 import { resolveAccessibilityProps } from '@symbiote-native/components';
 import type {
@@ -71,7 +72,10 @@ import {
 
 export type ISliderProps = Omit<
   ISliderBaseProps,
-  'onValueChange' | 'onSlidingStart' | 'onSlidingComplete' | 'onAccessibilityAction'
+  | 'onValueChange'
+  | 'onSlidingStart'
+  | 'onSlidingComplete'
+  | 'onAccessibilityAction'
 >;
 
 function isRecord(value: unknown): value is Record<string, unknown> {
@@ -87,7 +91,9 @@ function asStyle(value: unknown): ISliderProps['style'] {
 }
 
 @Directive()
-export abstract class SliderBase implements ISliderProps, OnChanges {
+export abstract class SliderBase
+  implements ISliderProps, OnChanges, ControlValueAccessor
+{
   @Input() value?: number;
   @Input() minimumValue?: number;
   @Input() maximumValue?: number;
@@ -121,8 +127,10 @@ export abstract class SliderBase implements ISliderProps, OnChanges {
   @Input() accessibilityValue?: IAccessibilityProps['accessibilityValue'];
   @Input() accessibilityActions?: IAccessibilityProps['accessibilityActions'];
   @Input() accessibilityLabelledBy?: string | string[];
-  @Input() importantForAccessibility?: IAccessibilityProps['importantForAccessibility'];
-  @Input() accessibilityLiveRegion?: IAccessibilityProps['accessibilityLiveRegion'];
+  @Input()
+  importantForAccessibility?: IAccessibilityProps['importantForAccessibility'];
+  @Input()
+  accessibilityLiveRegion?: IAccessibilityProps['accessibilityLiveRegion'];
   @Input() screenReaderFocusable?: boolean;
   @Input() accessibilityViewIsModal?: boolean;
   @Input() accessibilityElementsHidden?: boolean;
@@ -199,7 +207,9 @@ export abstract class SliderBase implements ISliderProps, OnChanges {
     if (value !== undefined) this.slidingComplete.emit(value);
   };
 
-  protected readonly handleAccessibilityAction = (event: ISymbioteEvent): void => {
+  protected readonly handleAccessibilityAction = (
+    event: ISymbioteEvent,
+  ): void => {
     this.accessibilityAction.emit(event);
   };
 
@@ -215,6 +225,29 @@ export abstract class SliderBase implements ISliderProps, OnChanges {
     }
   };
 
+  // ControlValueAccessor — `value`/`disabled` are plain @Input() fields feeding the `descriptor`
+  // getter (re-evaluated on every OnPush check, no fold/commit dance), so writeValue()/
+  // setDisabledState() can set them straight, no TextInput-style stale-safe seam needed.
+  writeValue(value: number | null): void {
+    this.value = value ?? undefined;
+    this.changeDetector.markForCheck();
+  }
+
+  registerOnChange(fn: (value: number) => void): void {
+    this.valueChange.subscribe(fn);
+  }
+
+  registerOnTouched(fn: () => void): void {
+    // Slider has no blur concept (it's a drag control, not a text field) — the thumb release is
+    // the closest "the user is done interacting" signal.
+    this.slidingComplete.subscribe(() => fn());
+  }
+
+  setDisabledState(isDisabled: boolean): void {
+    this.disabled = isDisabled;
+    this.changeDetector.markForCheck();
+  }
+
   private inputProps(): ISliderProps {
     return {
       value: this.value,
@@ -256,8 +289,10 @@ export abstract class SliderBase implements ISliderProps, OnChanges {
       accessibilityElementsHidden: this.accessibilityElementsHidden,
       accessibilityIgnoresInvertColors: this.accessibilityIgnoresInvertColors,
       accessibilityLanguage: this.accessibilityLanguage,
-      accessibilityRespondsToUserInteraction: this.accessibilityRespondsToUserInteraction,
-      accessibilityShowsLargeContentViewer: this.accessibilityShowsLargeContentViewer,
+      accessibilityRespondsToUserInteraction:
+        this.accessibilityRespondsToUserInteraction,
+      accessibilityShowsLargeContentViewer:
+        this.accessibilityShowsLargeContentViewer,
       accessibilityLargeContentTitle: this.accessibilityLargeContentTitle,
       onAccessibilityTap: this.onAccessibilityTap,
       onMagicTap: this.onMagicTap,
@@ -325,9 +360,16 @@ export abstract class SliderBase implements ISliderProps, OnChanges {
       upperLimit,
       disabled: resolveSliderDisabled(disabled, accessibilityState),
       inverted,
-      thumbTintColor: resolveThumbTintColor(thumbTintColor, false, hasThumbImage),
+      thumbTintColor: resolveThumbTintColor(
+        thumbTintColor,
+        false,
+        hasThumbImage,
+      ),
       thumbImage: nativeThumbImage,
-      accessibilityState: resolveSliderAccessibilityState(disabled, accessibilityState),
+      accessibilityState: resolveSliderAccessibilityState(
+        disabled,
+        accessibilityState,
+      ),
       width: this.width,
       style,
       passthrough: {
@@ -360,6 +402,9 @@ export abstract class SliderBase implements ISliderProps, OnChanges {
       inverted,
       platform: this.platform,
     });
-    return renderSlider(view, this.platform, { steps, onLayout: this.handleLayout });
+    return renderSlider(view, this.platform, {
+      steps,
+      onLayout: this.handleLayout,
+    });
   }
 }

package/src/core/index.ts

@@ -22,7 +22,11 @@ export {
 } from './slider-state';
 export type { ISliderAccessibilityState } from './slider-state';
 
-export type { ISliderProps, ISliderPlatform, ISliderViewProps } from './slider-props';
+export type {
+  ISliderProps,
+  ISliderPlatform,
+  ISliderViewProps,
+} from './slider-props';
 
 export {
   renderSlider,
@@ -42,4 +46,7 @@ export {
   THUMB_IMAGE_STYLE,
   STEP_NUMBER_CONTAINER_STYLE,
 } from './render-steps-indicator';
-export type { IStepsIndicatorParams, IStepMarkerProps } from './render-steps-indicator';
+export type {
+  IStepsIndicatorParams,
+  IStepMarkerProps,
+} from './render-steps-indicator';

package/src/core/render-slider.ts

@@ -7,9 +7,16 @@
 // width measurement that feeds `view.width`.
 
 import { dlog } from '@symbiote-native/engine';
-import type { IStyleProp, IViewStyle, ISymbioteEvent } 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 type {
+  IDescriptor,
+  IDescriptorChild,
+} from '@symbiote-native/components';
 import { RNC_SLIDER_VIEW_NAME } from './constants';
 import type { ISliderPlatform, ISliderViewProps } from './slider-props';
 
@@ -27,21 +34,32 @@ 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 }];
+  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 {
+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 {
+export function renderSliderNative(
+  view: ISliderViewProps,
+  platform: ISliderPlatform,
+): IDescriptor {
   dlog(
     `Slider render value=${String(view.value)} disabled=${String(view.disabled)} width=${String(view.width)}`,
   );

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

@@ -6,7 +6,10 @@
 // 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 {
+  IDescriptor,
+  IDescriptorChild,
+} from '@symbiote-native/components';
 import type { IViewStyle, ITextStyle } from '@symbiote-native/engine';
 import {
   SLIDER_MARGIN_HORIZONTAL_PADDING,
@@ -54,7 +57,10 @@ export const STEP_NUMBER_CONTAINER_STYLE: IViewStyle = {
 
 // 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 {
+export function resolveStepsContainerStyle(
+  width: number,
+  platform: ISliderPlatform,
+): IViewStyle {
   return {
     flex: 1,
     flexDirection: 'row',
@@ -114,29 +120,51 @@ function renderStepCell(
     trackMarkChildren.push(
       el(
         'symbiote-view',
-        { style: THUMB_IMAGE_CONTAINER_STYLE, testID: 'sliderTrackMark-thumbImage' },
-        [el('symbiote-image', { source: params.thumbImage, style: THUMB_IMAGE_STYLE })],
+        {
+          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),
+    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),
-        ]),
+        txt(
+          {
+            testID: `${displayIndex}th-step`,
+            style: { fontSize } satisfies ITextStyle,
+          },
+          [String(value)],
+        ),
       ]),
     );
   }
-  return el('symbiote-view', { style: STEP_INDICATOR_ELEMENT_STYLE }, cellChildren);
+  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 {
+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) =>

package/src/core/slider-props.ts

@@ -1,11 +1,13 @@
-// Slider prop types. 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) — since that element type is framework-specific, it can't live in a shared type, so it
-// 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.
+// Slider prop types. ISliderProps is the shared agnostic base every adapter re-exports and
+// extends; ISliderViewProps is the pre-resolved input the render fn paints. The custom
+// `StepMarker` field is per-adapter (a framework element return type can't live here) - see
+// CLAUDE.md's <prop_types_split_agnostic_vs_per_adapter>.
 
-import type { IColorValue, IStyleProp, IViewStyle } from '@symbiote-native/engine';
+import type {
+  IColorValue,
+  IStyleProp,
+  IViewStyle,
+} from '@symbiote-native/engine';
 import type {
   IAccessibilityProps,
   IAriaProps,
@@ -14,8 +16,7 @@ import type {
 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.
+// adapter unwraps nativeEvent.value); colors/images/style are agnostic value types.
 export interface ISliderProps extends IAccessibilityProps, IAriaProps {
   value?: number;
   minimumValue?: number;
@@ -55,14 +56,13 @@ export type ISliderPlatform = {
   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.
+// Pre-resolved inputs the native render paints from. Only fields that need FOLDING are explicit
+// here (value sanitized, disabled/accessibilityState resolved, limits defaulted, thumb
+// tint/image resolved against the StepMarker decision); everything else - track colors/images,
+// thumbSize, tapToSeek, vertical, accessibility*/testID/aria-*, and the native event handlers -
+// rides in `passthrough` verbatim (the engine routes on*-keyed handlers and ViewConfig color
+// processors). `width` is set only when a step overlay needs it, avoiding a width:0 first-paint
+// flash in the common case.
 export type ISliderViewProps = {
   value?: number;
   minimumValue: number;

package/src/core/slider-state.ts

@@ -18,7 +18,9 @@ export type ISliderAccessibilityState = {
 // Mirror the library's `passedValue`: NaN or a falsy value (incl. 0) becomes undefined, so the
 // native view falls back to its own default initial value rather than receiving NaN/0 as a
 // write. Entered once it still acts as the initial value (the slider is uncontrolled after).
-export function sanitizeSliderValue(value: number | undefined): number | undefined {
+export function sanitizeSliderValue(
+  value: number | undefined,
+): number | undefined {
   if (value === undefined) return undefined;
   return Number.isNaN(value) || !value ? undefined : value;
 }
@@ -44,17 +46,23 @@ export function resolveSliderAccessibilityState(
 }
 
 // Default the slide limits to the unbounded sentinels when unset (the native, non-web case).
-export function resolveSliderLowerLimit(lowerLimit: number | undefined): number {
+export function resolveSliderLowerLimit(
+  lowerLimit: number | undefined,
+): number {
   return lowerLimit ?? SLIDER_LIMIT_MIN_VALUE;
 }
 
-export function resolveSliderUpperLimit(upperLimit: number | undefined): number {
+export function resolveSliderUpperLimit(
+  upperLimit: number | undefined,
+): number {
   return upperLimit ?? SLIDER_LIMIT_MAX_VALUE;
 }
 
 // The value the native value/sliding events carry as nativeEvent.value. nativeEvent is an
 // untyped Record, so narrow; a non-number payload yields undefined (no callback fired upstream).
-export function valueFromSliderEvent(event: ISymbioteEvent): number | undefined {
+export function valueFromSliderEvent(
+  event: ISymbioteEvent,
+): number | undefined {
   const value = event.nativeEvent.value;
   return typeof value === 'number' ? value : undefined;
 }
@@ -91,7 +99,10 @@ export function shouldPassNativeThumbImage(
 }
 
 // The library warns when the limits cross; surfaced as a pure predicate so the adapter logs it.
-export function isInvalidLimitConfig(lowerLimit: number, upperLimit: number): boolean {
+export function isInvalidLimitConfig(
+  lowerLimit: number,
+  upperLimit: number,
+): boolean {
   return lowerLimit >= upperLimit;
 }
 

package/src/react/slider/index.ios.ts

@@ -3,7 +3,10 @@
 // Also the base (./index re-exports it) for headless. Mirrors the library's iOS branches.
 
 import { createSlider } from './shared';
-import { SLIDER_IOS_DEFAULT_HEIGHT, SLIDER_STEP_RESOLUTION_IOS } from '../../core';
+import {
+  SLIDER_IOS_DEFAULT_HEIGHT,
+  SLIDER_STEP_RESOLUTION_IOS,
+} from '../../core';
 
 const IOS_STEPS_CONTAINER_TOP = 10;
 

package/src/react/slider/shared.ts

@@ -9,7 +9,13 @@
 // library's React Slider component — that component internally calls React hooks off the React
 // dispatcher, so a non-React adapter rendering it directly would crash on a null dispatcher.
 
-import { createElement, forwardRef, useCallback, useEffect, useState } from 'react';
+import {
+  createElement,
+  forwardRef,
+  useCallback,
+  useEffect,
+  useState,
+} from 'react';
 import type {
   FC,
   ForwardRefExoticComponent,
@@ -19,8 +25,16 @@ import type {
 } from 'react';
 import { descriptorToReact, Image } from '@symbiote-native/react';
 import { resolveAccessibilityProps } from '@symbiote-native/components';
-import type { IDescriptor, IDescriptorChild, IImageSourceProp } from '@symbiote-native/components';
-import { dlog, type ISymbioteEvent, type ISymbioteNode } from '@symbiote-native/engine';
+import type {
+  IDescriptor,
+  IDescriptorChild,
+  IImageSourceProp,
+} from '@symbiote-native/components';
+import {
+  dlog,
+  type ISymbioteEvent,
+  type ISymbioteNode,
+} from '@symbiote-native/engine';
 import {
   sanitizeSliderValue,
   resolveSliderDisabled,
@@ -86,7 +100,10 @@ function toChild(child: IDescriptorChild): ReactElement | string {
 // renderSlider's Descriptor IS the outer wrapper (symbiote-view hosting the native leaf +
 // optional steps overlay); className is reapplied on it here, exactly like ImageBackground's
 // wrapper.
-function withClassName(descriptor: IDescriptor, className: string | undefined): ReactElement {
+function withClassName(
+  descriptor: IDescriptor,
+  className: string | undefined,
+): ReactElement {
   return createElement(
     descriptor.type,
     { key: descriptor.key, ...descriptor.props, className },
@@ -123,7 +140,9 @@ export function createSlider(platform: ISliderPlatform): ISliderComponent {
       ...passthrough
     } = props;
 
-    const [reportedValue, setReportedValue] = useState<number | undefined>(undefined);
+    const [reportedValue, setReportedValue] = useState<number | undefined>(
+      undefined,
+    );
     const [width, setWidth] = useState(0);
 
     const handleValueChange = useCallback(
@@ -157,7 +176,8 @@ export function createSlider(platform: ISliderPlatform): ISliderComponent {
     );
     const handleLayout = useCallback((event: ISymbioteEvent): void => {
       const layout = event.nativeEvent.layout;
-      if (isRecord(layout) && typeof layout.width === 'number') setWidth(layout.width);
+      if (isRecord(layout) && typeof layout.width === 'number')
+        setWidth(layout.width);
     }, []);
 
     const minimum = minimumValue ?? SLIDER_DEFAULT_MINIMUM_VALUE;
@@ -173,10 +193,16 @@ export function createSlider(platform: ISliderPlatform): ISliderComponent {
 
     const hasStepMarker = StepMarker !== undefined;
     const hasThumbImage = thumbImage !== undefined;
-    const showSteps = shouldRenderStepsIndicator(hasStepMarker, renderStepNumber);
+    const showSteps = shouldRenderStepsIndicator(
+      hasStepMarker,
+      renderStepNumber,
+    );
     // Passed to the native view raw — the engine runs the image processor derived from RNCSlider's
     // ViewConfig — and only when no custom marker draws its own thumb (matches the library).
-    const nativeThumbImage = shouldPassNativeThumbImage(hasStepMarker, hasThumbImage)
+    const nativeThumbImage = shouldPassNativeThumbImage(
+      hasStepMarker,
+      hasThumbImage,
+    )
       ? thumbImage
       : undefined;
 
@@ -189,9 +215,16 @@ export function createSlider(platform: ISliderPlatform): ISliderComponent {
       upperLimit: upper,
       disabled: resolveSliderDisabled(disabled, accessibilityState),
       inverted: inverted ?? false,
-      thumbTintColor: resolveThumbTintColor(thumbTintColor, hasStepMarker, hasThumbImage),
+      thumbTintColor: resolveThumbTintColor(
+        thumbTintColor,
+        hasStepMarker,
+        hasThumbImage,
+      ),
       thumbImage: nativeThumbImage,
-      accessibilityState: resolveSliderAccessibilityState(disabled, accessibilityState),
+      accessibilityState: resolveSliderAccessibilityState(
+        disabled,
+        accessibilityState,
+      ),
       width,
       style,
       passthrough: {
@@ -206,10 +239,18 @@ export function createSlider(platform: ISliderPlatform): ISliderComponent {
     };
 
     if (!showSteps) {
-      return withClassName(renderSlider(view, platform, { onLayout: handleLayout }), className);
+      return withClassName(
+        renderSlider(view, platform, { onLayout: handleLayout }),
+        className,
+      );
     }
 
-    const options = computeStepOptions(minimum, maximum, stepValue, platform.stepResolution);
+    const options = computeStepOptions(
+      minimum,
+      maximum,
+      stepValue,
+      platform.stepResolution,
+    );
     const currentValue = reportedValue ?? view.value ?? minimum;
 
     if (StepMarker !== undefined) {
@@ -225,7 +266,11 @@ export function createSlider(platform: ISliderPlatform): ISliderComponent {
       });
       return createElement(
         'symbiote-view',
-        { style: resolveStepsWrapperStyle(style, platform), onLayout: handleLayout, className },
+        {
+          style: resolveStepsWrapperStyle(style, platform),
+          onLayout: handleLayout,
+          className,
+        },
         overlay,
         descriptorToReact(renderSliderNative(view, platform)),
       );
@@ -248,7 +293,10 @@ export function createSlider(platform: ISliderPlatform): ISliderComponent {
 }
 
 // The wrapper style for the custom-marker steps path mirrors renderSlider's wrapper.
-function resolveStepsWrapperStyle(style: unknown, platform: ISliderPlatform): unknown {
+function resolveStepsWrapperStyle(
+  style: unknown,
+  platform: ISliderPlatform,
+): unknown {
   return [platform.defaultStyle, style, { justifyContent: 'center' }];
 }
 
@@ -291,7 +339,10 @@ function renderCustomStepsOverlay(params: ICustomStepsParams): ReactElement {
             style: THUMB_IMAGE_CONTAINER_STYLE,
             testID: 'sliderTrackMark-thumbImage',
           },
-          createElement(Image, { source: params.thumbImage, style: THUMB_IMAGE_STYLE }),
+          createElement(Image, {
+            source: params.thumbImage,
+            style: THUMB_IMAGE_STYLE,
+          }),
         ),
       );
     }

package/src/register/index.ts

@@ -7,7 +7,11 @@
 // barrel imports it; the component modules and their headless tests stay free of the spec.
 
 import '@react-native-community/slider/dist/RNCSliderNativeComponent';
-import { processColor, registerComponent, type IColorValue } from '@symbiote-native/engine';
+import {
+  processColor,
+  registerComponent,
+  type IColorValue,
+} from '@symbiote-native/engine';
 import {
   RNC_SLIDER_VIEW_NAME,
   SLIDER_ON_CHANGE,
@@ -33,7 +37,10 @@ function processSliderColor(value: unknown): unknown {
 registerComponent(RNC_SLIDER_VIEW_NAME, {
   events: [
     { raw: 'topChange', listener: listenerName(SLIDER_ON_CHANGE) },
-    { raw: 'topRNCSliderValueChange', listener: listenerName(SLIDER_ON_VALUE_CHANGE) },
+    {
+      raw: 'topRNCSliderValueChange',
+      listener: listenerName(SLIDER_ON_VALUE_CHANGE),
+    },
     {
       raw: 'topRNCSliderSlidingStart',
       listener: listenerName(SLIDER_ON_SLIDING_START),

package/src/solid/index.ts

@@ -0,0 +1,12 @@
+// @symbiote-native/slider/solid: the Solid wrapper over the @react-native-community/slider native
+// view. The bare import below is FIRST and is a side effect, not a re-export: it registers the
+// native view's ViewConfig (the codegen spec, never the library's React component) before any
+// Slider can mount. Metro's production-only `inlineRequires` moves a require down to the first
+// place its binding is USED and compiles a barrel's re-export into a lazy getter, so a registration
+// reached through one silently never runs in RELEASE builds only. Do not restructure it.
+
+import '../register';
+
+export { Slider } from './slider';
+export type { ISliderProps, ISliderStepMarker } from './slider';
+export type { IStepMarkerProps } from '../core';