diff --git a/apps/radix-docs/src/api-doc/primitives.json b/apps/radix-docs/src/api-doc/primitives.json
index 4563c713..96651f95 100644
--- a/apps/radix-docs/src/api-doc/primitives.json
+++ b/apps/radix-docs/src/api-doc/primitives.json
@@ -948,7 +948,131 @@
         "components": {}
     },
     "slider-root.component": {
-        "components": {}
+        "components": {
+            "RdxSliderRootComponent": {
+                "description": "",
+                "props": {
+                    "description": "Defines the input properties of the component.",
+                    "values": [
+                        {
+                            "name": "min",
+                            "optional": false,
+                            "readonly": true,
+                            "type": "InputSignalWithTransform<number, NumberInput>",
+                            "default": "0",
+                            "defaultValue": "0",
+                            "description": "The minimum value for the range."
+                        },
+                        {
+                            "name": "max",
+                            "optional": false,
+                            "readonly": true,
+                            "type": "InputSignalWithTransform<number, NumberInput>",
+                            "default": "100",
+                            "defaultValue": "100",
+                            "description": "The maximum value for the range."
+                        },
+                        {
+                            "name": "step",
+                            "optional": false,
+                            "readonly": true,
+                            "type": "InputSignalWithTransform<number, NumberInput>",
+                            "default": "1",
+                            "defaultValue": "1",
+                            "description": "The stepping interval."
+                        },
+                        {
+                            "name": "minStepsBetweenThumbs",
+                            "optional": false,
+                            "readonly": true,
+                            "type": "InputSignalWithTransform<number, NumberInput>",
+                            "default": "0",
+                            "defaultValue": "0",
+                            "description": "The minimum permitted steps between multiple thumbs."
+                        },
+                        {
+                            "name": "orientation",
+                            "optional": false,
+                            "readonly": true,
+                            "type": "InputSignal<\"horizontal\" | \"vertical\">",
+                            "default": "'horizontal'",
+                            "defaultValue": "'horizontal'",
+                            "description": "The orientation of the slider."
+                        },
+                        {
+                            "name": "disabled",
+                            "optional": false,
+                            "readonly": true,
+                            "type": "InputSignalWithTransform<boolean, BooleanInput>",
+                            "default": "false",
+                            "defaultValue": "false",
+                            "description": "When true, prevents the user from interacting with the slider."
+                        },
+                        {
+                            "name": "inverted",
+                            "optional": false,
+                            "readonly": true,
+                            "type": "InputSignalWithTransform<boolean, BooleanInput>",
+                            "default": "false",
+                            "defaultValue": "false",
+                            "description": "Whether the slider is visually inverted."
+                        },
+                        {
+                            "name": "dir",
+                            "optional": false,
+                            "readonly": true,
+                            "type": "InputSignal<\"ltr\" | \"rtl\">",
+                            "default": "'ltr'",
+                            "defaultValue": "'ltr'",
+                            "description": "The reading direction of the combobox when applicable."
+                        },
+                        {
+                            "name": "styleClass",
+                            "optional": false,
+                            "readonly": true,
+                            "type": "InputSignal<undefined | string>",
+                            "default": "...",
+                            "defaultValue": "...",
+                            "description": "Style class of the component."
+                        },
+                        {
+                            "name": "modelValue",
+                            "optional": false,
+                            "readonly": true,
+                            "type": "ModelSignal<number[]>",
+                            "default": "...",
+                            "defaultValue": "...",
+                            "description": "The controlled value of the slider."
+                        }
+                    ]
+                },
+                "emits": {
+                    "description": "Defines emit that determine the behavior of the component based on a given condition or report the actions that the component takes.",
+                    "values": [
+                        {
+                            "name": "valueChange",
+                            "parameters": [
+                                {
+                                    "name": "value",
+                                    "type": "number[]"
+                                }
+                            ],
+                            "description": "Event handler called when the slider value changes."
+                        },
+                        {
+                            "name": "valueCommit",
+                            "parameters": [
+                                {
+                                    "name": "value",
+                                    "type": "number[]"
+                                }
+                            ],
+                            "description": "Event handler called when the value changes at the end of an interaction.\n\nUseful when you only need to capture a final value e.g. to update a backend service."
+                        }
+                    ]
+                }
+            }
+        }
     },
     "slider-thumb-impl.directive": {
         "components": {}
diff --git a/apps/radix-docs/src/content/primitives/components/slider.mdx b/apps/radix-docs/src/content/primitives/components/slider.mdx
index 6749eb87..f5d03693 100644
--- a/apps/radix-docs/src/content/primitives/components/slider.mdx
+++ b/apps/radix-docs/src/content/primitives/components/slider.mdx
@@ -36,19 +36,91 @@ description: .
 ### Root
 `RdxSliderRootComponent`
 
+<PropsTable name="RdxSliderRootComponent" />
+
+<EmitsTable name="RdxSliderRootComponent" />
+
+<DataAttributesTable attributes={[
+    { name: '[data-disabled]', value: 'Present when disabled' },
+    { name: '[data-orientation]', value: '"vertical" | "horizontal"' }
+]} />
 
 ### Track
 `RdxSliderTrackComponent`
 
+The track that contains the `SliderRange`.
+
+<DataAttributesTable attributes={[
+    { name: '[data-disabled]', value: 'Present when disabled' },
+    { name: '[data-orientation]', value: '"vertical" | "horizontal"' }
+]} />
 
 ### Range
 `RdxSliderRangeComponent`
 
+The range part. Must live inside `SliderTrack`.
+
+
+<DataAttributesTable attributes={[
+    { name: '[data-disabled]', value: 'Present when disabled' },
+    { name: '[data-orientation]', value: '"vertical" | "horizontal"' }
+]} />
 
 ### Thumb
 `RdxSliderThumbComponent`
 
+A draggable thumb. You can render multiple thumbs.
+
+
+<DataAttributesTable attributes={[
+    { name: '[data-disabled]', value: 'Present when disabled' },
+    { name: '[data-orientation]', value: '"vertical" | "horizontal"' }
+]} />
+
 ## Accessibility
 Adheres to the [Slider WAI-ARIA design pattern](https://www.w3.org/WAI/ARIA/apg/patterns/slider-multithumb).
 
 ### Keyboard Interactions
+
+<KeyboardTable attributes={[
+    {
+        key: 'Home',
+        description: 'Sets the value to its minimum.',
+    },
+    {
+        key: 'End',
+        description: 'Sets the value to its maximum.',
+    },
+    {
+        key: 'PageDown',
+        description: ' Decreases the value by a larger step.',
+    },
+    {
+        key: 'PageUP',
+        description: ' Increases the value by a larger step.',
+    },
+    {
+        key: 'ArrowDown',
+        description: ' Decreases the value by the step amount.',
+    },
+    {
+        key: 'ArrowRight',
+        description: 'Increments/decrements by the step value depending on orientation.',
+    },
+    {
+        key: 'ArrowUp',
+        description: ' Increases the value by the step amount.',
+    },
+    {
+        key: 'ArrowLeft',
+        description: ' Increments/decrements by the step value depending on orientation. ',
+    },
+    {
+        key: 'Shift + ArrowUp',
+        description: ' Increases the value by a larger step.',
+    },
+    {
+        key: 'Shift + ArrowDown',
+        description: '  Decreases the value by a larger step.',
+    }
+]} />
diff --git a/packages/primitives/slider/src/slider-horizontal.component.ts b/packages/primitives/slider/src/slider-horizontal.component.ts
index d1235232..922a93dc 100644
--- a/packages/primitives/slider/src/slider-horizontal.component.ts
+++ b/packages/primitives/slider/src/slider-horizontal.component.ts
@@ -3,11 +3,10 @@ import {
     booleanAttribute,
     Component,
     ElementRef,
-    EventEmitter,
     inject,
     input,
     Input,
-    Output,
+    output,
     signal,
     viewChild
 } from '@angular/core';
@@ -48,12 +47,12 @@ export class RdxSliderHorizontalComponent {
 
     @Input() className = '';
 
-    @Output() slideStart = new EventEmitter<number>();
-    @Output() slideMove = new EventEmitter<number>();
-    @Output() slideEnd = new EventEmitter<void>();
-    @Output() stepKeyDown = new EventEmitter<{ event: KeyboardEvent; direction: number }>();
-    @Output() endKeyDown = new EventEmitter<KeyboardEvent>();
-    @Output() homeKeyDown = new EventEmitter<KeyboardEvent>();
+    readonly slideStart = output<number>();
+    readonly slideMove = output<number>();
+    readonly slideEnd = output<void>();
+    readonly stepKeyDown = output<{ event: KeyboardEvent; direction: number }>();
+    readonly endKeyDown = output<KeyboardEvent>();
+    readonly homeKeyDown = output<KeyboardEvent>();
 
     private readonly sliderElement = viewChild<ElementRef>('sliderElement');
 
diff --git a/packages/primitives/slider/src/slider-impl.directive.ts b/packages/primitives/slider/src/slider-impl.directive.ts
index cb235330..f3358cb2 100644
--- a/packages/primitives/slider/src/slider-impl.directive.ts
+++ b/packages/primitives/slider/src/slider-impl.directive.ts
@@ -1,10 +1,9 @@
-import { Directive, EventEmitter, inject, Output } from '@angular/core';
+import { Directive, inject, output } from '@angular/core';
 import { RdxSliderRootComponent } from './slider-root.component';
 import { ARROW_KEYS, PAGE_KEYS } from './utils';
 
 @Directive({
     selector: '[rdxSliderImpl]',
-    standalone: true,
     host: {
         role: 'slider',
         tabindex: '0',
@@ -17,12 +16,12 @@ import { ARROW_KEYS, PAGE_KEYS } from './utils';
 export class RdxSliderImplDirective {
     protected readonly rootContext = inject(RdxSliderRootComponent);
 
-    @Output() slideStart = new EventEmitter<PointerEvent>();
-    @Output() slideMove = new EventEmitter<PointerEvent>();
-    @Output() slideEnd = new EventEmitter<PointerEvent>();
-    @Output() homeKeyDown = new EventEmitter<KeyboardEvent>();
-    @Output() endKeyDown = new EventEmitter<KeyboardEvent>();
-    @Output() stepKeyDown = new EventEmitter<KeyboardEvent>();
+    readonly slideStart = output<PointerEvent>();
+    readonly slideMove = output<PointerEvent>();
+    readonly slideEnd = output<PointerEvent>();
+    readonly homeKeyDown = output<KeyboardEvent>();
+    readonly endKeyDown = output<KeyboardEvent>();
+    readonly stepKeyDown = output<KeyboardEvent>();
 
     onKeyDown(event: KeyboardEvent) {
         if (event.key === 'Home') {
diff --git a/packages/primitives/slider/src/slider-range.component.ts b/packages/primitives/slider/src/slider-range.component.ts
index 610c8d00..5baf1a66 100644
--- a/packages/primitives/slider/src/slider-range.component.ts
+++ b/packages/primitives/slider/src/slider-range.component.ts
@@ -4,7 +4,6 @@ import { convertValueToPercentage } from './utils';
 
 @Component({
     selector: 'rdx-slider-range',
-    standalone: true,
     host: {
         '[attr.data-disabled]': 'rootContext.disabled() ? "" : undefined',
         '[attr.data-orientation]': 'rootContext.orientation()',
diff --git a/packages/primitives/slider/src/slider-root.component.ts b/packages/primitives/slider/src/slider-root.component.ts
index 24041996..950ad983 100644
--- a/packages/primitives/slider/src/slider-root.component.ts
+++ b/packages/primitives/slider/src/slider-root.component.ts
@@ -4,14 +4,13 @@ import {
     booleanAttribute,
     Component,
     computed,
-    EventEmitter,
     inject,
     input,
     Input,
     model,
     numberAttribute,
     OnInit,
-    Output
+    output
 } from '@angular/core';
 import { RdxSliderHorizontalComponent } from './slider-horizontal.component';
 import { RdxSliderOrientationContextService } from './slider-orientation-context.service';
@@ -25,6 +24,9 @@ import {
     roundValue
 } from './utils';
 
+/**
+ * @group Components
+ */
 @Component({
     selector: 'rdx-slider',
     imports: [RdxSliderHorizontalComponent, RdxSliderVerticalComponent, NgIf, NgTemplateOutlet],
@@ -34,7 +36,7 @@ import {
 
         <ng-container *ngIf="orientation() === 'horizontal'">
             <rdx-slider-horizontal
-                [className]="className"
+                [className]="styleClass() || className"
                 [min]="min()"
                 [max]="max()"
                 [dir]="dir()"
@@ -55,7 +57,7 @@ import {
 
         <ng-container *ngIf="orientation() === 'vertical'">
             <rdx-slider-vertical
-                [className]="className"
+                [className]="styleClass() || className"
                 [min]="min()"
                 [max]="max()"
                 [dir]="dir()"
@@ -79,29 +81,102 @@ export class RdxSliderRootComponent implements OnInit {
     /** @ignore */
     readonly orientationContext = inject(RdxSliderOrientationContextService);
 
+    /**
+     * The minimum value for the range.
+     *
+     * @group Props
+     * @defaultValue 0
+     */
     readonly min = input<number, NumberInput>(0, { transform: numberAttribute });
 
+    /**
+     * The maximum value for the range.
+     *
+     * @group Props
+     * @defaultValue 100
+     */
     readonly max = input<number, NumberInput>(100, { transform: numberAttribute });
 
+    /**
+     * The stepping interval.
+     *
+     * @group Props
+     * @defaultValue 1
+     */
     readonly step = input<number, NumberInput>(1, { transform: numberAttribute });
 
+    /**
+     * The minimum permitted steps between multiple thumbs.
+     *
+     * @group Props
+     * @defaultValue 0
+     */
     readonly minStepsBetweenThumbs = input<number, NumberInput>(0, { transform: numberAttribute });
 
+    /**
+     * The orientation of the slider.
+     *
+     * @group Props
+     * @defaultValue 'horizontal'
+     */
     readonly orientation = input<'horizontal' | 'vertical'>('horizontal');
 
+    /**
+     * When true, prevents the user from interacting with the slider.
+     *
+     * @group Props
+     * @defaultValue false
+     */
     readonly disabled = input<boolean, BooleanInput>(false, { transform: booleanAttribute });
 
+    /**
+     * Whether the slider is visually inverted.
+     *
+     * @group Props
+     * @defaultValue false
+     */
     readonly inverted = input<boolean, BooleanInput>(false, { transform: booleanAttribute });
 
+    /**
+     * The reading direction of the combobox when applicable.
+     *
+     * @group Props
+     * @defaultValue 'ltr'
+     */
     readonly dir = input<'ltr' | 'rtl'>('ltr');
 
     @Input() className: string = '';
 
-    @Output() valueChange = new EventEmitter<number[]>();
-    @Output() valueCommit = new EventEmitter<number[]>();
-
+    /**
+     * Style class of the component.
+     *
+     * @group Props
+     */
+    readonly styleClass = input<string>();
+
+    /**
+     * The controlled value of the slider.
+     *
+     * @group Props
+     */
     readonly modelValue = model<number[]>([0]);
 
+    /**
+     * Event handler called when the slider value changes.
+     *
+     * @group Emits
+     */
+    readonly valueChange = output<number[]>();
+
+    /**
+     * Event handler called when the value changes at the end of an interaction.
+     *
+     * Useful when you only need to capture a final value e.g. to update a backend service.
+     *
+     * @group Emits
+     */
+    readonly valueCommit = output<number[]>();
+
     /** @ignore */
     readonly valueIndexToChange = model(0);
 
diff --git a/packages/primitives/slider/src/slider-thumb-impl.directive.ts b/packages/primitives/slider/src/slider-thumb-impl.directive.ts
index 7538af95..b988fe72 100644
--- a/packages/primitives/slider/src/slider-thumb-impl.directive.ts
+++ b/packages/primitives/slider/src/slider-thumb-impl.directive.ts
@@ -5,7 +5,6 @@ import { convertValueToPercentage, getThumbInBoundsOffset } from './utils';
 
 @Directive({
     selector: '[rdxSliderThumbImpl]',
-    standalone: true,
     host: {
         role: 'slider',
         '[tabindex]': 'rootContext.disabled() ? undefined : 0',
diff --git a/packages/primitives/slider/src/slider-thumb.component.ts b/packages/primitives/slider/src/slider-thumb.component.ts
index b75f4509..c1fae6a0 100644
--- a/packages/primitives/slider/src/slider-thumb.component.ts
+++ b/packages/primitives/slider/src/slider-thumb.component.ts
@@ -3,7 +3,6 @@ import { RdxSliderThumbImplDirective } from './slider-thumb-impl.directive';
 
 @Component({
     selector: 'rdx-slider-thumb',
-    standalone: true,
     hostDirectives: [RdxSliderThumbImplDirective],
     template: `
         <ng-content />
diff --git a/packages/primitives/slider/src/slider-track.component.ts b/packages/primitives/slider/src/slider-track.component.ts
index 588b4570..ca8284fe 100644
--- a/packages/primitives/slider/src/slider-track.component.ts
+++ b/packages/primitives/slider/src/slider-track.component.ts
@@ -3,7 +3,6 @@ import { RdxSliderRootComponent } from './slider-root.component';
 
 @Component({
     selector: 'rdx-slider-track',
-    standalone: true,
     host: {
         '[attr.data-disabled]': "rootContext.disabled() ? '' : undefined",
         '[attr.data-orientation]': 'rootContext.orientation()'
diff --git a/packages/primitives/slider/src/slider-vertical.component.ts b/packages/primitives/slider/src/slider-vertical.component.ts
index ea54394e..a8a0bce1 100644
--- a/packages/primitives/slider/src/slider-vertical.component.ts
+++ b/packages/primitives/slider/src/slider-vertical.component.ts
@@ -3,11 +3,10 @@ import {
     booleanAttribute,
     Component,
     ElementRef,
-    EventEmitter,
     inject,
     input,
     Input,
-    Output,
+    output,
     signal,
     viewChild
 } from '@angular/core';
@@ -48,12 +47,12 @@ export class RdxSliderVerticalComponent {
 
     @Input() className = '';
 
-    @Output() slideStart = new EventEmitter<number>();
-    @Output() slideMove = new EventEmitter<number>();
-    @Output() slideEnd = new EventEmitter<void>();
-    @Output() stepKeyDown = new EventEmitter<{ event: KeyboardEvent; direction: number }>();
-    @Output() endKeyDown = new EventEmitter<KeyboardEvent>();
-    @Output() homeKeyDown = new EventEmitter<KeyboardEvent>();
+    readonly slideStart = output<number>();
+    readonly slideMove = output<number>();
+    readonly slideEnd = output<void>();
+    readonly stepKeyDown = output<{ event: KeyboardEvent; direction: number }>();
+    readonly endKeyDown = output<KeyboardEvent>();
+    readonly homeKeyDown = output<KeyboardEvent>();
 
     private readonly sliderElement = viewChild<ElementRef>('sliderElement');
 
diff --git a/packages/primitives/slider/stories/slider.stories.ts b/packages/primitives/slider/stories/slider.stories.ts
index ee8c6306..f1ecd935 100644
--- a/packages/primitives/slider/stories/slider.stories.ts
+++ b/packages/primitives/slider/stories/slider.stories.ts
@@ -37,7 +37,7 @@ export const Default: Story = {
     render: (args) => ({
         props: args,
         template: html`
-            <rdx-slider className="SliderRoot" [modelValue]="[45]" [step]="5">
+            <rdx-slider styleClass="SliderRoot" [modelValue]="[45]" [step]="5">
                 <rdx-slider-track class="SliderTrack">
                     <rdx-slider-range class="SliderRange" />
                 </rdx-slider-track>
@@ -51,7 +51,7 @@ export const Inverted: Story = {
     render: (args) => ({
         props: args,
         template: html`
-            <rdx-slider className="SliderRoot" inverted [modelValue]="[45]" [step]="5">
+            <rdx-slider styleClass="SliderRoot" inverted [modelValue]="[45]" [step]="5">
                 <rdx-slider-track class="SliderTrack">
                     <rdx-slider-range class="SliderRange" />
                 </rdx-slider-track>
@@ -65,7 +65,7 @@ export const Thumbs: Story = {
     render: (args) => ({
         props: args,
         template: html`
-            <rdx-slider className="SliderRoot" [modelValue]="[45, 80]" [step]="5">
+            <rdx-slider styleClass="SliderRoot" [modelValue]="[45, 80]" [step]="5">
                 <rdx-slider-track class="SliderTrack">
                     <rdx-slider-range class="SliderRange" />
                 </rdx-slider-track>
@@ -80,14 +80,14 @@ export const Vertical: Story = {
     render: (args) => ({
         props: args,
         template: html`
-            <rdx-slider className="SliderRootV" [orientation]="'vertical'" [modelValue]="[45]" [step]="5">
+            <rdx-slider styleClass="SliderRootV" [orientation]="'vertical'" [modelValue]="[45]" [step]="5">
                 <rdx-slider-track class="SliderTrackV">
                     <rdx-slider-range class="SliderRangeV" />
                 </rdx-slider-track>
                 <rdx-slider-thumb class="SliderThumbV" />
             </rdx-slider>
 
-            <rdx-slider className="SliderRoot" [orientation]="'horizontal'" [modelValue]="[45]" [step]="5">
+            <rdx-slider styleClass="SliderRoot" [orientation]="'horizontal'" [modelValue]="[45]" [step]="5">
                 <rdx-slider-track class="SliderTrack">
                     <rdx-slider-range class="SliderRange" />
                 </rdx-slider-track>
@@ -102,7 +102,7 @@ export const VerticalInverted: Story = {
         props: args,
         template: html`
             <rdx-slider
-                className="SliderRootV"
+                styleClass="SliderRootV"
                 style="display: flex; height: 200px;"
                 inverted
                 [orientation]="'vertical'"