diff --git a/docs-ui/src/app/components/range-slider/page.mdx b/docs-ui/src/app/components/range-slider/page.mdx
index ded00c8878..93d0eac782 100644
--- a/docs-ui/src/app/components/range-slider/page.mdx
+++ b/docs-ui/src/app/components/range-slider/page.mdx
@@ -89,12 +89,7 @@ Mark a field as required to show a "Required" indicator in the label.
 
 ### Disabled
 
-<Snippet
-  align="center"
-  py={4}
-  preview={<Disabled />}
-  code={disabledSnippet}
-/>
+<Snippet align="center" py={4} preview={<Disabled />} code={disabledSnippet} />
 
 <Theming definition={RangeSliderDefinition} />
 
diff --git a/packages/ui/report.api.md b/packages/ui/report.api.md
index 7e8c8833ee..c9af330ffb 100644
--- a/packages/ui/report.api.md
+++ b/packages/ui/report.api.md
@@ -39,6 +39,7 @@ import { RowProps as RowProps_2 } from 'react-aria-components';
 import type { SearchFieldProps as SearchFieldProps_2 } from 'react-aria-components';
 import type { SelectProps as SelectProps_2 } from 'react-aria-components';
 import type { SeparatorProps } from 'react-aria-components';
+import type { SliderProps } from 'react-aria-components';
 import type { SortDescriptor as SortDescriptor_2 } from 'react-stately';
 import type { SubmenuTriggerProps as SubmenuTriggerProps_2 } from 'react-aria-components';
 import type { SwitchProps as SwitchProps_2 } from 'react-aria-components';
@@ -1967,6 +1968,52 @@ export interface RadioProps
   extends RadioOwnProps,
     Omit<RadioProps_2, keyof RadioOwnProps> {}
 
+// @public (undocumented)
+export const RangeSlider: ForwardRefExoticComponent<
+  RangeSliderProps & RefAttributes<HTMLDivElement>
+>;
+
+// @public
+export const RangeSliderDefinition: {
+  readonly styles: {
+    readonly [key: string]: string;
+  };
+  readonly classNames: {
+    readonly root: 'bui-RangeSlider';
+    readonly header: 'bui-RangeSliderHeader';
+    readonly track: 'bui-RangeSliderTrack';
+    readonly trackFill: 'bui-RangeSliderTrackFill';
+    readonly thumb: 'bui-RangeSliderThumb';
+    readonly output: 'bui-RangeSliderOutput';
+  };
+  readonly propDefs: {
+    readonly className: {};
+  };
+};
+
+// @public (undocumented)
+export interface RangeSliderOwnProps {
+  // (undocumented)
+  className?: string;
+}
+
+// @public (undocumented)
+export interface RangeSliderProps
+  extends Omit<SliderProps<[number, number]>, 'children'>,
+    Omit<
+      FieldLabelProps,
+      | 'htmlFor'
+      | 'id'
+      | 'className'
+      | 'defaultValue'
+      | 'onChange'
+      | 'slot'
+      | 'style'
+    > {
+  formatValue?: (value: number) => string;
+  showValueLabel?: boolean;
+}
+
 // @public (undocumented)
 export type Responsive<T> = T | Partial<Record<Breakpoint, T>>;
 
diff --git a/packages/ui/src/components/RangeSlider/RangeSlider.module.css b/packages/ui/src/components/RangeSlider/RangeSlider.module.css
index 085d69946a..209f823a19 100644
--- a/packages/ui/src/components/RangeSlider/RangeSlider.module.css
+++ b/packages/ui/src/components/RangeSlider/RangeSlider.module.css
@@ -92,9 +92,7 @@
     border-radius: 50%;
     background: var(--bui-bg-solid);
     border: 2px solid var(--bui-bg-solid);
-    box-shadow:
-      0 1px 3px 0 rgb(0 0 0 / 0.1),
-      0 1px 2px -1px rgb(0 0 0 / 0.1);
+    box-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
     cursor: grab;
     transition: all 200ms;
 
@@ -105,8 +103,7 @@
 
     &[data-dragging] {
       cursor: grabbing;
-      box-shadow:
-        0 4px 6px -1px rgb(0 0 0 / 0.1),
+      box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1),
         0 2px 4px -2px rgb(0 0 0 / 0.1);
     }
 
diff --git a/packages/ui/src/components/RangeSlider/RangeSlider.tsx b/packages/ui/src/components/RangeSlider/RangeSlider.tsx
index 4cdb78ca01..f9f1ac1bc0 100644
--- a/packages/ui/src/components/RangeSlider/RangeSlider.tsx
+++ b/packages/ui/src/components/RangeSlider/RangeSlider.tsx
@@ -25,7 +25,7 @@ import clsx from 'clsx';
 import { FieldLabel } from '../FieldLabel';
 import { FieldError } from '../FieldError';
 import type { RangeSliderProps } from './types';
-import { useStyles } from '../../hooks/useStyles';
+import { useDefinition } from '../../hooks/useDefinition';
 import { RangeSliderDefinition } from './definition';
 import styles from './RangeSlider.module.css';
 
@@ -107,7 +107,7 @@ export const RangeSlider = forwardRef<HTMLDivElement, RangeSliderProps>(
       ...propsWithoutDefault
     } = props;
 
-    const { classNames, dataAttributes, style, cleanedProps } = useStyles(
+    const { ownProps, restProps, dataAttributes } = useDefinition(
       RangeSliderDefinition,
       {
         minValue,
@@ -120,16 +120,16 @@ export const RangeSlider = forwardRef<HTMLDivElement, RangeSliderProps>(
         ...propsWithoutDefault,
       },
     );
+    const { classes, className } = ownProps;
 
     const {
-      className,
       label: _ignoredLabel,
       description,
       secondaryLabel,
       showValueLabel = false,
       formatValue = (val: number) => val.toString(),
       ...rest
-    } = cleanedProps;
+    } = restProps;
 
     // If a secondary label is provided, use it. Otherwise, use 'Required' if the field is required.
     const secondaryLabelText =
@@ -137,16 +137,15 @@ export const RangeSlider = forwardRef<HTMLDivElement, RangeSliderProps>(
 
     return (
       <AriaSlider
-        className={clsx(classNames.root, styles[classNames.root], className)}
+        className={clsx(classes.root, styles[classes.root], className)}
         {...dataAttributes}
         aria-label={ariaLabel}
         aria-labelledby={ariaLabelledBy}
-        style={style}
         {...rest}
         ref={ref}
       >
         {(label || showValueLabel) && (
-          <div className={clsx(classNames.header, styles[classNames.header])}>
+          <div className={clsx(classes.header, styles[classes.header])}>
             <FieldLabel
               label={label}
               secondaryLabel={secondaryLabelText}
@@ -154,7 +153,7 @@ export const RangeSlider = forwardRef<HTMLDivElement, RangeSliderProps>(
             />
             {showValueLabel && (
               <SliderOutput
-                className={clsx(classNames.output, styles[classNames.output])}
+                className={clsx(classes.output, styles[classes.output])}
               >
                 {({ state }) => {
                   const values = state.values;
@@ -169,9 +168,7 @@ export const RangeSlider = forwardRef<HTMLDivElement, RangeSliderProps>(
             )}
           </div>
         )}
-        <SliderTrack
-          className={clsx(classNames.track, styles[classNames.track])}
-        >
+        <SliderTrack className={clsx(classes.track, styles[classes.track])}>
           {({ state }) => {
             const start = state.getThumbPercent(0);
             const end = state.getThumbPercent(1);
@@ -189,19 +186,16 @@ export const RangeSlider = forwardRef<HTMLDivElement, RangeSliderProps>(
             return (
               <>
                 <div
-                  className={clsx(
-                    classNames.trackFill,
-                    styles[classNames.trackFill],
-                  )}
+                  className={clsx(classes.trackFill, styles[classes.trackFill])}
                   style={trackFillStyle}
                 />
                 <SliderThumb
                   index={0}
-                  className={clsx(classNames.thumb, styles[classNames.thumb])}
+                  className={clsx(classes.thumb, styles[classes.thumb])}
                 />
                 <SliderThumb
                   index={1}
-                  className={clsx(classNames.thumb, styles[classNames.thumb])}
+                  className={clsx(classes.thumb, styles[classes.thumb])}
                 />
               </>
             );
diff --git a/packages/ui/src/components/RangeSlider/definition.ts b/packages/ui/src/components/RangeSlider/definition.ts
index 29f605978a..b23e607ede 100644
--- a/packages/ui/src/components/RangeSlider/definition.ts
+++ b/packages/ui/src/components/RangeSlider/definition.ts
@@ -14,13 +14,16 @@
  * limitations under the License.
  */
 
-import type { ComponentDefinition } from '../../types';
+import { defineComponent } from '../../hooks/useDefinition';
+import type { RangeSliderOwnProps } from './types';
+import styles from './RangeSlider.module.css';
 
 /**
  * Component definition for RangeSlider
  * @public
  */
-export const RangeSliderDefinition = {
+export const RangeSliderDefinition = defineComponent<RangeSliderOwnProps>()({
+  styles,
   classNames: {
     root: 'bui-RangeSlider',
     header: 'bui-RangeSliderHeader',
@@ -29,8 +32,7 @@ export const RangeSliderDefinition = {
     thumb: 'bui-RangeSliderThumb',
     output: 'bui-RangeSliderOutput',
   },
-  dataAttributes: {
-    disabled: [true, false] as const,
-    orientation: ['horizontal', 'vertical'] as const,
+  propDefs: {
+    className: {},
   },
-} as const satisfies ComponentDefinition;
+});
diff --git a/packages/ui/src/components/RangeSlider/types.ts b/packages/ui/src/components/RangeSlider/types.ts
index 1f09cfc713..2ee4105240 100644
--- a/packages/ui/src/components/RangeSlider/types.ts
+++ b/packages/ui/src/components/RangeSlider/types.ts
@@ -17,10 +17,24 @@
 import type { SliderProps as AriaSliderProps } from 'react-aria-components';
 import type { FieldLabelProps } from '../FieldLabel/types';
 
+/** @public */
+export interface RangeSliderOwnProps {
+  className?: string;
+}
+
 /** @public */
 export interface RangeSliderProps
   extends Omit<AriaSliderProps<[number, number]>, 'children'>,
-    Omit<FieldLabelProps, 'htmlFor' | 'id' | 'className'> {
+    Omit<
+      FieldLabelProps,
+      | 'htmlFor'
+      | 'id'
+      | 'className'
+      | 'defaultValue'
+      | 'onChange'
+      | 'slot'
+      | 'style'
+    > {
   /**
    * Whether to show a value label in the header next to the field label
    * @defaultValue false