diff --git a/pages/progress-bar/style-api-v2.page.tsx b/pages/progress-bar/style-api-v2.page.tsx
new file mode 100644
index 00000000000..19475c39f4c
--- /dev/null
+++ b/pages/progress-bar/style-api-v2.page.tsx
@@ -0,0 +1,21 @@
+// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+// SPDX-License-Identifier: Apache-2.0
+import React from 'react';
+
+import { ProgressBar } from '~components';
+
+import { SimplePage } from '../app/templates';
+
+import styles from './style-api-v2.scss';
+
+const brand = { styleClassNames: { root: styles['bar-brand'], percentage: styles['percentage-brand'] } };
+const genai = { styleClassNames: { root: styles['bar-genai'], percentage: styles['percentage-genai'] } };
+
+export default function () {
+  return (
+    <SimplePage title="Progress bar - Style API v2" screenshotArea={{}}>
+      <ProgressBar value={45} label="Attachments" description="Files are uploading" {...brand} />
+      <ProgressBar value={72} label="Attachments" additionalInfo="You can add more files at any time" {...genai} />
+    </SimplePage>
+  );
+}
diff --git a/pages/progress-bar/style-api-v2.scss b/pages/progress-bar/style-api-v2.scss
new file mode 100644
index 00000000000..78511c97861
--- /dev/null
+++ b/pages/progress-bar/style-api-v2.scss
@@ -0,0 +1,33 @@
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+
+@use '~components/styling/progress-bar';
+@use '../style-api/palette' as palette;
+
+.bar-brand {
+  @include progress-bar.root(
+    $track-color: palette.$subtle,
+    $value-color: palette.$accent,
+    $bar-border-radius: 2px,
+    $bar-block-size: 8px
+  );
+}
+
+.bar-genai {
+  @include progress-bar.root(
+    $track-color: palette.$genai-surface,
+    $value-color: palette.$genai,
+    $bar-border-radius: 0,
+    $bar-block-size: 12px
+  );
+}
+
+.percentage-brand {
+  @include progress-bar.percentage($color: palette.$accent, $font-size: 14px, $font-weight: 700);
+}
+
+.percentage-genai {
+  @include progress-bar.percentage($color: palette.$genai-text, $font-size: 16px, $font-weight: 600);
+}
diff --git a/pages/slider/style-api-v2.page.tsx b/pages/slider/style-api-v2.page.tsx
new file mode 100644
index 00000000000..7ab09b15e09
--- /dev/null
+++ b/pages/slider/style-api-v2.page.tsx
@@ -0,0 +1,69 @@
+// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+// SPDX-License-Identifier: Apache-2.0
+import React, { useState } from 'react';
+
+import { KeyValuePairs, Slider } from '~components';
+
+import { SimplePage } from '../app/templates';
+
+import styles from './style-api-v2.scss';
+
+const styleClassNames = { root: styles.slider, handle: styles.handle };
+
+export default function () {
+  const [value, setValue] = useState(40);
+  return (
+    <SimplePage title="Slider - Style API v2" screenshotArea={{}}>
+      <KeyValuePairs
+        items={[
+          {
+            type: 'pair',
+            label: 'With tick marks',
+            value: (
+              <Slider
+                value={value}
+                onChange={({ detail }) => setValue(detail.value)}
+                min={0}
+                max={100}
+                step={20}
+                tickMarks={true}
+                ariaLabel="With tick marks"
+                {...{ styleClassNames }}
+              />
+            ),
+          },
+          {
+            type: 'pair',
+            label: 'Disabled',
+            value: (
+              <Slider
+                value={value}
+                onChange={({ detail }) => setValue(detail.value)}
+                min={0}
+                max={100}
+                disabled={true}
+                ariaLabel="Disabled"
+                {...{ styleClassNames }}
+              />
+            ),
+          },
+          {
+            type: 'pair',
+            label: 'Read-only',
+            value: (
+              <Slider
+                value={value}
+                onChange={({ detail }) => setValue(detail.value)}
+                min={0}
+                max={100}
+                readOnly={true}
+                ariaLabel="Read-only"
+                {...{ styleClassNames }}
+              />
+            ),
+          },
+        ]}
+      />
+    </SimplePage>
+  );
+}
diff --git a/pages/slider/style-api-v2.scss b/pages/slider/style-api-v2.scss
new file mode 100644
index 00000000000..167fe3299bd
--- /dev/null
+++ b/pages/slider/style-api-v2.scss
@@ -0,0 +1,39 @@
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+
+@use '~components/styling/slider';
+@use '../style-api/palette' as palette;
+
+.slider {
+  @include slider.root($track-color: palette.$surface-alt, $value-color: palette.$accent);
+}
+
+// The handle is the native <input type="range">, so its states are regular selectors.
+.handle {
+  @include slider.handle($fill-color: palette.$accent, $halo-color: palette.$genai, $border-radius: 4px);
+
+  &:hover {
+    @include slider.handle($fill-color: palette.$accent-hover);
+  }
+
+  &:is(:focus, :active) {
+    @include slider.handle($fill-color: palette.$accent-active);
+  }
+
+  &:disabled,
+  &[aria-disabled='true'] {
+    @include slider.handle($fill-color: palette.$control-bg-disabled, $halo-color: palette.$control-bg-disabled);
+  }
+}
+
+// The value fill follows the handle state through :has() on the root slot.
+.slider:has(.handle:is(:focus, :active)) {
+  @include slider.root($value-color: palette.$accent-active);
+}
+
+// After the focus rule: a read-only slider stays focusable, and both rules have the same specificity.
+.slider:has(.handle:disabled, .handle[aria-disabled='true']) {
+  @include slider.root($value-color: palette.$control-bg-disabled);
+}
diff --git a/src/progress-bar/__tests__/style-api.test.tsx b/src/progress-bar/__tests__/style-api.test.tsx
new file mode 100644
index 00000000000..76ede0d1b48
--- /dev/null
+++ b/src/progress-bar/__tests__/style-api.test.tsx
@@ -0,0 +1,36 @@
+// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+// SPDX-License-Identifier: Apache-2.0
+import React from 'react';
+import { render } from '@testing-library/react';
+
+import ProgressBar, { ProgressBarProps } from '../../../lib/components/progress-bar';
+import createWrapper from '../../../lib/components/test-utils/dom';
+
+function renderProgressBar(props: Partial<ProgressBarProps> & Record<string, unknown> = {}) {
+  const { container } = render(<ProgressBar value={40} label="Label" {...props} />);
+  return { container, wrapper: createWrapper(container).findProgressBar()! };
+}
+
+describe('ProgressBar Style API v2', () => {
+  test.each<ProgressBarProps.Variant>(['standalone', 'flash', 'key-value'])(
+    'applies styleClassNames (variant=%s)',
+    variant => {
+      const { wrapper } = renderProgressBar({
+        variant,
+        styleClassNames: { root: 'a', percentage: 'b', unknown: 'c' },
+      });
+      expect(wrapper.getElement()).toHaveClass('a');
+      expect(wrapper.getElement()).not.toHaveClass('c');
+
+      const percentage = wrapper.findPercentageText()!.getElement();
+      expect(percentage).not.toHaveClass('a');
+      expect(percentage).toHaveClass('b');
+      expect(percentage).not.toHaveClass('c');
+    }
+  );
+
+  test('does not leak the styleClassNames prop to the DOM', () => {
+    const { container } = renderProgressBar({ styleClassNames: { root: 'a', percentage: 'b' } });
+    expect(container.querySelector('[styleClassNames]')).toBeNull();
+  });
+});
diff --git a/src/progress-bar/index.tsx b/src/progress-bar/index.tsx
index 5c1737f059f..24e0b7a575b 100644
--- a/src/progress-bar/index.tsx
+++ b/src/progress-bar/index.tsx
@@ -14,7 +14,7 @@ import { applyDisplayName } from '../internal/utils/apply-display-name';
 import { joinStrings } from '../internal/utils/strings';
 import InternalLiveRegion from '../live-region/internal';
 import { ProgressBarProps } from './interfaces';
-import { Progress, ResultState, SmallText } from './internal';
+import { Progress, ResultState, SmallText, StyleClassNames } from './internal';
 
 import styles from './styles.css.js';
 
@@ -41,7 +41,8 @@ export default function ProgressBar({
   const { __internalRootRef } = useBaseComponent('ProgressBar', {
     props: { variant },
   });
-  const baseProps = getBaseProps(rest);
+  const { styleClassNames, ...restProps } = rest as typeof rest & { styleClassNames?: StyleClassNames };
+  const baseProps = getBaseProps(restProps);
   const generatedName = useUniqueId('awsui-progress-bar-');
 
   const labelId = `${generatedName}-label`;
@@ -75,7 +76,7 @@ export default function ProgressBar({
   return (
     <div
       {...baseProps}
-      className={clsx(baseProps.className, styles.root, variant && styles[variant])}
+      className={clsx(baseProps.className, styleClassNames?.root, styles.root, variant && styles[variant])}
       ref={__internalRootRef}
     >
       <div className={isInFlash ? styles['flash-container'] : undefined}>
@@ -101,6 +102,7 @@ export default function ProgressBar({
                 )}
                 isInFlash={isInFlash}
                 style={style}
+                styleClassNames={styleClassNames}
               />
               <InternalLiveRegion hidden={true} tagName="span" delay={0}>
                 {label}
diff --git a/src/progress-bar/internal.tsx b/src/progress-bar/internal.tsx
index f8a0c785a8c..a84d3e2aab9 100644
--- a/src/progress-bar/internal.tsx
+++ b/src/progress-bar/internal.tsx
@@ -26,9 +26,24 @@ interface ProgressProps {
   ariaLabelledby?: string;
   ariaDescribedby?: string;
   style?: ProgressBarProps.Style;
+  styleClassNames?: StyleClassNames;
 }
 
-export const Progress = ({ value, isInFlash, ariaLabel, ariaLabelledby, ariaDescribedby, style }: ProgressProps) => {
+// Style API v2
+export interface StyleClassNames {
+  root?: string;
+  percentage?: string;
+}
+
+export const Progress = ({
+  value,
+  isInFlash,
+  ariaLabel,
+  ariaLabelledby,
+  ariaDescribedby,
+  style,
+  styleClassNames,
+}: ProgressProps) => {
   const roundedValue = Math.round(value);
   const progressValue = clamp(roundedValue, 0, MAX_VALUE);
 
@@ -56,14 +71,12 @@ export const Progress = ({ value, isInFlash, ariaLabel, ariaLabelledby, ariaDesc
         }}
       />
       <span aria-hidden="true" className={styles['percentage-container']}>
-        <InternalBox
-          className={styles.percentage}
-          variant="small"
-          color={isInFlash ? 'inherit' : undefined}
-          nativeAttributes={progressPercentageStyles ? { style: progressPercentageStyles } : undefined}
+        <small
+          className={clsx(styleClassNames?.percentage, styles.percentage, isInFlash && styles['percentage-flash'])}
+          style={progressPercentageStyles}
         >
           {`${progressValue}%`}
-        </InternalBox>
+        </small>
       </span>
     </div>
   );
diff --git a/src/progress-bar/styles.scss b/src/progress-bar/styles.scss
index 49bd3e65c11..e0320c5c8aa 100644
--- a/src/progress-bar/styles.scss
+++ b/src/progress-bar/styles.scss
@@ -6,20 +6,47 @@
 @use '../internal/styles/tokens' as awsui;
 @use '../internal/styles' as styles;
 @use '../internal/generated/custom-css-properties/index.scss' as custom-props;
+@use '../internal/styles/style-api' as style-api;
 @use './motion';
 
-$progress-height: var(#{custom-props.$progressBarHeight}, 0.4 * styles.$base-size);
-$progress-border-radius: var(#{custom-props.$progressBarBorderRadius}, 10px);
-$progress-background-color: var(
-  #{custom-props.$progressBarBackgroundColor},
-  awsui.$color-background-progress-bar-default
+$progress-bar-tokens: style-api.resolve((track-color, value-color, bar-block-size, bar-border-radius), carrier);
+@include style-api.register($progress-bar-tokens);
+@include style-api.docs('root', $progress-bar-tokens);
+@include style-api.docs('percentage', $properties: (color, font-family, font-size, font-weight));
+
+$progress-height: style-api.value(
+  $progress-bar-tokens,
+  bar-block-size,
+  var(#{custom-props.$progressBarHeight}, 0.4 * styles.$base-size)
+);
+$progress-border-radius: style-api.value(
+  $progress-bar-tokens,
+  bar-border-radius,
+  var(#{custom-props.$progressBarBorderRadius}, 10px)
+);
+$progress-background-color: style-api.value(
+  $progress-bar-tokens,
+  track-color,
+  var(#{custom-props.$progressBarBackgroundColor}, awsui.$color-background-progress-bar-default)
+);
+$progress-value-background-color: style-api.value(
+  $progress-bar-tokens,
+  value-color,
+  var(#{custom-props.$progressValueBackgroundColor}, awsui.$color-background-progress-bar-value-default)
 );
-$progress-value-background-color: var(
-  #{custom-props.$progressValueBackgroundColor},
-  awsui.$color-background-progress-bar-value-default
+$progress-flash-background-color: style-api.value(
+  $progress-bar-tokens,
+  track-color,
+  var(#{custom-props.$progressBarBackgroundColor}, awsui.$color-background-progress-bar-flash)
+);
+$progress-flash-value-background-color: style-api.value(
+  $progress-bar-tokens,
+  value-color,
+  var(#{custom-props.$progressValueBackgroundColor}, awsui.$color-background-progress-bar-value-flash)
 );
 
 .root {
+  @include style-api.carriers($progress-bar-tokens);
   @include styles.styles-reset;
 }
 
@@ -79,7 +106,19 @@ $progress-value-background-color: var(
 }
 
 .percentage {
-  /* used in test-utils */
+  display: inline-block;
+  font-family: awsui.$font-family-base;
+  -webkit-font-smoothing: auto;
+  -moz-osx-font-smoothing: auto;
+  line-height: awsui.$line-height-body-s;
+  letter-spacing: awsui.$letter-spacing-body-s;
+  color: awsui.$color-text-small;
+  font-size: awsui.$font-size-body-s;
+  font-weight: styles.$font-weight-normal;
+
+  &.percentage-flash {
+    color: currentColor;
+  }
 }
 
 @mixin general-progress-background-style {
@@ -131,22 +170,16 @@ $progress-value-background-color: var(
   }
 
   &.progress-flash {
-    background-color: var(#{custom-props.$progressBarBackgroundColor}, awsui.$color-background-progress-bar-flash);
+    background-color: $progress-flash-background-color;
 
     &::-webkit-progress-bar {
-      background-color: var(#{custom-props.$progressBarBackgroundColor}, awsui.$color-background-progress-bar-flash);
+      background-color: $progress-flash-background-color;
     }
     &::-webkit-progress-value {
-      background-color: var(
-        #{custom-props.$progressValueBackgroundColor},
-        awsui.$color-background-progress-bar-value-flash
-      );
+      background-color: $progress-flash-value-background-color;
     }
     &::-moz-progress-bar {
-      background-color: var(
-        #{custom-props.$progressValueBackgroundColor},
-        awsui.$color-background-progress-bar-value-flash
-      );
+      background-color: $progress-flash-value-background-color;
     }
   }
 }
diff --git a/src/slider/__tests__/style-api.test.tsx b/src/slider/__tests__/style-api.test.tsx
new file mode 100644
index 00000000000..765ef577458
--- /dev/null
+++ b/src/slider/__tests__/style-api.test.tsx
@@ -0,0 +1,44 @@
+// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+// SPDX-License-Identifier: Apache-2.0
+import React from 'react';
+import { render } from '@testing-library/react';
+
+import Slider from '../../../lib/components/slider';
+import createWrapper from '../../../lib/components/test-utils/dom';
+
+import styles from '../../../lib/components/slider/styles.css.js';
+
+function renderSlider(element: React.ReactElement) {
+  const { container } = render(element);
+  return { container, wrapper: createWrapper(container).findSlider()! };
+}
+
+const slots = { root: 'a', handle: 'b', track: 'c', range: 'd' };
+
+describe('Slider Style API v2 (implicit styleClassNames)', () => {
+  test('applies styleClassNames to the root and handle slots only', () => {
+    const { container, wrapper } = renderSlider(
+      <Slider
+        value={40}
+        min={0}
+        max={100}
+        step={20}
+        tickMarks={true}
+        onChange={() => {}}
+        {...({ styleClassNames: slots } as any)}
+      />
+    );
+
+    expect(wrapper.getElement()).toHaveClass('a');
+    expect(container.querySelector(`.${styles.thumb}`)).toHaveClass('b');
+    expect(container.querySelector('.c')).toBeNull();
+    expect(container.querySelector('.d')).toBeNull();
+  });
+
+  test('does not leak the styleClassNames prop to the DOM', () => {
+    const { container } = renderSlider(
+      <Slider value={40} min={0} max={100} onChange={() => {}} {...({ styleClassNames: slots } as any)} />
+    );
+    expect(container.querySelector('[styleClassNames]')).toBeNull();
+  });
+});
diff --git a/src/slider/internal.tsx b/src/slider/internal.tsx
index e1de93e7e92..08fc4e56d8a 100644
--- a/src/slider/internal.tsx
+++ b/src/slider/internal.tsx
@@ -27,7 +27,14 @@ import {
 
 import styles from './styles.css.js';
 
+// Style API v2
+export interface StyleClassNames {
+  root?: string;
+  handle?: string;
+}
+
 interface InternalSliderProps extends SliderProps, InternalBaseComponentProps {
+  styleClassNames?: StyleClassNames;
   style?: SliderProps['style'];
 }
 
@@ -47,6 +54,7 @@ export default function InternalSlider({
   valueFormatter,
   i18nStrings,
   style,
+  styleClassNames,
   __internalRootRef,
   ...rest
 }: InternalSliderProps) {
@@ -132,7 +140,7 @@ export default function InternalSlider({
     <div
       {...baseProps}
       ref={__internalRootRef}
-      className={clsx(baseProps.className, styles.root)}
+      className={clsx(baseProps.className, styles.root, styleClassNames?.root)}
       style={getSliderStyles(style)}
     >
       <div
@@ -241,7 +249,7 @@ export default function InternalSlider({
             }
             fireNonCancelableEvent(onChange, { value: Number(event.target.value) });
           }}
-          className={clsx(styles.thumb, {
+          className={clsx(styles.thumb, styleClassNames?.handle, {
             [styles.error]: invalid,
             [styles.warning]: showWarning,
             [styles.disabled]: disabled,
diff --git a/src/slider/mixins.scss b/src/slider/mixins.scss
index 16e07d1ac04..aed35ec169c 100644
--- a/src/slider/mixins.scss
+++ b/src/slider/mixins.scss
@@ -4,21 +4,42 @@
 @use '../internal/styles' as styles;
 @use '../internal/styles/tokens' as awsui;
 @use '../internal/generated/custom-css-properties/index.scss' as custom-props;
+@use '../internal/styles/style-api' as style-api;
+
+$handle-tokens: style-api.resolve((fill-color, halo-color, border-radius), carrier);
+
+@function fill-color($fallback) {
+  @return style-api.value($handle-tokens, fill-color, $fallback);
+}
+
+// The halo defaults to the fill color.
+@function halo-color($fallback) {
+  @return style-api.value($handle-tokens, halo-color, fill-color($fallback));
+}
 
 $thumb-size: awsui.$space-m;
 $thumb-readonly-size: awsui.$space-s;
 $border-radius-slider-thumb: 50%;
+$thumb-radius: style-api.value(
+  $handle-tokens,
+  border-radius,
+  var(#{custom-props.$styleSliderHandleBorderRadius}, $border-radius-slider-thumb)
+);
 
 @mixin base-thumb-styles {
   appearance: none;
-  background: var(#{custom-props.$styleSliderHandleBackgroundDefault}, awsui.$color-background-slider-handle-default);
-  border-color: var(#{custom-props.$styleSliderHandleBackgroundDefault}, awsui.$color-background-slider-handle-default);
+  background: fill-color(
+    var(#{custom-props.$styleSliderHandleBackgroundDefault}, awsui.$color-background-slider-handle-default)
+  );
+  border-color: fill-color(
+    var(#{custom-props.$styleSliderHandleBackgroundDefault}, awsui.$color-background-slider-handle-default)
+  );
   border-block-width: 2px;
   border-inline-width: 2px;
-  border-start-start-radius: var(#{custom-props.$styleSliderHandleBorderRadius}, $border-radius-slider-thumb);
-  border-start-end-radius: var(#{custom-props.$styleSliderHandleBorderRadius}, $border-radius-slider-thumb);
-  border-end-start-radius: var(#{custom-props.$styleSliderHandleBorderRadius}, $border-radius-slider-thumb);
-  border-end-end-radius: var(#{custom-props.$styleSliderHandleBorderRadius}, $border-radius-slider-thumb);
+  border-start-start-radius: $thumb-radius;
+  border-start-end-radius: $thumb-radius;
+  border-end-start-radius: $thumb-radius;
+  border-end-end-radius: $thumb-radius;
   box-shadow: none;
 
   cursor: pointer;
@@ -29,10 +50,13 @@ $border-radius-slider-thumb: 50%;
 }
 
 @mixin base-thumb-hover-styles {
-  background: var(#{custom-props.$styleSliderHandleBackgroundHover}, awsui.$color-background-slider-handle-default);
+  background: fill-color(
+    var(#{custom-props.$styleSliderHandleBackgroundHover}, awsui.$color-background-slider-handle-default)
+  );
   box-shadow:
     0px 0 0 2px awsui.$color-background-slider-handle-ring,
-    0 0 0 4px var(#{custom-props.$styleSliderHandleBackgroundHover}, awsui.$color-background-slider-handle-default);
+    0 0 0 4px
+      halo-color(var(#{custom-props.$styleSliderHandleBackgroundHover}, awsui.$color-background-slider-handle-default));
 }
 
 @mixin base-thumb-focus-styles {
@@ -40,10 +64,15 @@ $border-radius-slider-thumb: 50%;
   inline-size: 20px;
   box-shadow:
     0px 0 0 2px awsui.$color-background-slider-handle-ring,
-    0 0 0 4px var(#{custom-props.$styleSliderHandleBackgroundActive}, awsui.$color-background-slider-handle-active);
-  background: var(#{custom-props.$styleSliderHandleBackgroundActive}, awsui.$color-background-slider-handle-active);
+    0 0 0 4px
+      halo-color(var(#{custom-props.$styleSliderHandleBackgroundActive}, awsui.$color-background-slider-handle-active));
+  background: fill-color(
+    var(#{custom-props.$styleSliderHandleBackgroundActive}, awsui.$color-background-slider-handle-active)
+  );
 
-  border-color: var(#{custom-props.$styleSliderHandleBackgroundActive}, awsui.$color-background-slider-handle-active);
+  border-color: fill-color(
+    var(#{custom-props.$styleSliderHandleBackgroundActive}, awsui.$color-background-slider-handle-active)
+  );
   border-block-width: 2px;
   border-inline-width: 2px;
 }
@@ -53,10 +82,10 @@ $border-radius-slider-thumb: 50%;
   inline-size: $thumb-readonly-size;
   box-shadow:
     0px 0 0 2px awsui.$color-background-slider-handle-ring,
-    0 0 0 4px awsui.$color-foreground-control-read-only;
-  background: awsui.$color-foreground-control-read-only;
+    0 0 0 4px halo-color(awsui.$color-foreground-control-read-only);
+  background: fill-color(awsui.$color-foreground-control-read-only);
 
-  border-color: awsui.$color-background-slider-handle-active;
+  border-color: fill-color(awsui.$color-background-slider-handle-active);
   border-block-width: 2px;
   border-inline-width: 2px;
 }
@@ -64,8 +93,12 @@ $border-radius-slider-thumb: 50%;
 @mixin base-thumb-disabled-styles {
   block-size: $thumb-size;
   inline-size: $thumb-size;
-  background-color: var(#{custom-props.$styleSliderHandleBackgroundDefault}, awsui.$color-background-control-disabled);
-  border-color: var(#{custom-props.$styleSliderHandleBackgroundDefault}, awsui.$color-background-control-disabled);
+  background-color: fill-color(
+    var(#{custom-props.$styleSliderHandleBackgroundDefault}, awsui.$color-background-control-disabled)
+  );
+  border-color: fill-color(
+    var(#{custom-props.$styleSliderHandleBackgroundDefault}, awsui.$color-background-control-disabled)
+  );
   box-shadow: none;
   pointer-events: none;
 }
@@ -73,66 +106,72 @@ $border-radius-slider-thumb: 50%;
 @mixin base-thumb-readonly-styles {
   block-size: $thumb-readonly-size;
   inline-size: $thumb-readonly-size;
-  background-color: var(#{custom-props.$styleSliderHandleBackgroundDefault}, awsui.$color-foreground-control-read-only);
-  border-color: var(#{custom-props.$styleSliderHandleBackgroundDefault}, awsui.$color-foreground-control-read-only);
+  background-color: fill-color(
+    var(#{custom-props.$styleSliderHandleBackgroundDefault}, awsui.$color-foreground-control-read-only)
+  );
+  border-color: fill-color(
+    var(#{custom-props.$styleSliderHandleBackgroundDefault}, awsui.$color-foreground-control-read-only)
+  );
   box-shadow: none;
   pointer-events: none;
 }
 
 @mixin error-thumb-focus-styles {
-  background-color: var(
-    #{custom-props.$styleSliderHandleBackgroundActive},
-    awsui.$color-background-slider-handle-error-active
+  background-color: fill-color(
+    var(#{custom-props.$styleSliderHandleBackgroundActive}, awsui.$color-background-slider-handle-error-active)
   );
   border-block-width: 2px;
   border-inline-width: 2px;
-  border-color: var(
-    #{custom-props.$styleSliderHandleBackgroundActive},
-    awsui.$color-background-slider-handle-error-active
+  border-color: fill-color(
+    var(#{custom-props.$styleSliderHandleBackgroundActive}, awsui.$color-background-slider-handle-error-active)
   );
 
   box-shadow:
     0px 0 0 2px awsui.$color-background-slider-handle-ring,
     0 0 0 4px
-      var(#{custom-props.$styleSliderHandleBackgroundActive}, awsui.$color-background-slider-handle-error-active);
+      halo-color(
+        var(#{custom-props.$styleSliderHandleBackgroundActive}, awsui.$color-background-slider-handle-error-active)
+      );
 }
 
 @mixin warning-thumb-focus-styles {
-  background-color: var(
-    #{custom-props.$styleSliderHandleBackgroundActive},
-    awsui.$color-background-slider-handle-warning-active
+  background-color: fill-color(
+    var(#{custom-props.$styleSliderHandleBackgroundActive}, awsui.$color-background-slider-handle-warning-active)
   );
   border-block-width: 2px;
   border-inline-width: 2px;
-  border-color: var(
-    #{custom-props.$styleSliderHandleBackgroundActive},
-    awsui.$color-background-slider-handle-warning-active
+  border-color: fill-color(
+    var(#{custom-props.$styleSliderHandleBackgroundActive}, awsui.$color-background-slider-handle-warning-active)
   );
 
   box-shadow:
     0px 0 0 2px awsui.$color-background-slider-handle-ring,
     0 0 0 4px
-      var(#{custom-props.$styleSliderHandleBackgroundActive}, awsui.$color-background-slider-handle-warning-active);
+      halo-color(
+        var(#{custom-props.$styleSliderHandleBackgroundActive}, awsui.$color-background-slider-handle-warning-active)
+      );
 }
 
 @mixin error-thumb-hover-styles {
-  background-color: var(
-    #{custom-props.$styleSliderHandleBackgroundDefault},
-    awsui.$color-background-slider-handle-error-active
+  background-color: fill-color(
+    var(#{custom-props.$styleSliderHandleBackgroundDefault}, awsui.$color-background-slider-handle-error-active)
   );
   box-shadow:
     0px 0 0 2px awsui.$color-background-slider-handle-ring,
     0 0 0 4px
-      var(#{custom-props.$styleSliderHandleBackgroundDefault}, awsui.$color-background-slider-handle-error-active);
+      halo-color(
+        var(#{custom-props.$styleSliderHandleBackgroundDefault}, awsui.$color-background-slider-handle-error-active)
+      );
 }
 
 @mixin warning-thumb-hover-styles {
-  background-color: var(
-    #{custom-props.$styleSliderHandleBackgroundDefault},
-    awsui.$color-background-slider-handle-warning-active
+  background-color: fill-color(
+    var(#{custom-props.$styleSliderHandleBackgroundDefault}, awsui.$color-background-slider-handle-warning-active)
   );
   box-shadow:
     0px 0 0 2px awsui.$color-background-slider-handle-ring,
     0 0 0 4px
-      var(#{custom-props.$styleSliderHandleBackgroundDefault}, awsui.$color-background-slider-handle-warning-active);
+      halo-color(
+        var(#{custom-props.$styleSliderHandleBackgroundDefault}, awsui.$color-background-slider-handle-warning-active)
+      );
 }
diff --git a/src/slider/styles.scss b/src/slider/styles.scss
index 7adb3c83439..39edef2f73c 100644
--- a/src/slider/styles.scss
+++ b/src/slider/styles.scss
@@ -6,9 +6,33 @@
 @use '../internal/styles' as styles;
 @use '../internal/styles/tokens' as awsui;
 @use '../internal/generated/custom-css-properties/index.scss' as custom-props;
+@use '../internal/styles/style-api' as style-api;
 @use './mixins.scss' as mixins;
 
+// Track and value colors are root tokens: the tick marks take either color depending on the slider state.
+$root-tokens: style-api.resolve((track-color, value-color), carrier);
+@include style-api.register($root-tokens, mixins.$handle-tokens);
+@include style-api.docs('root', $root-tokens);
+@include style-api.docs(
+  'handle',
+  mixins.$handle-tokens,
+  $descriptions: (
+    tokens: (
+      halo-color: 'Ring around the handle on hover and focus. Defaults to the fill color.',
+    )
+  )
+);
+
+@function track-color($fallback) {
+  @return style-api.value($root-tokens, track-color, $fallback);
+}
+
+@function value-color($fallback) {
+  @return style-api.value($root-tokens, value-color, $fallback);
+}
+
 .root {
+  @include style-api.carriers($root-tokens);
   @include styles.styles-reset;
   font-size: awsui.$font-size-body-s;
   padding-block: awsui.$space-s;
@@ -34,9 +58,8 @@
   }
 
   &-track {
-    background-color: var(
-      #{custom-props.$styleSliderTrackBackgroundColor},
-      awsui.$color-background-slider-track-default
+    background-color: track-color(
+      var(#{custom-props.$styleSliderTrackBackgroundColor}, awsui.$color-background-slider-track-default)
     );
     inline-size: calc(100% + mixins.$thumb-size);
     block-size: 2px;
@@ -44,70 +67,66 @@
 
     &.disabled {
       cursor: default;
-      background-color: var(#{custom-props.$styleSliderTrackBackgroundColor}, awsui.$color-background-control-disabled);
+      background-color: track-color(
+        var(#{custom-props.$styleSliderTrackBackgroundColor}, awsui.$color-background-control-disabled)
+      );
     }
 
     &.readonly:not(&.disabled) {
       cursor: default;
-      background-color: var(#{custom-props.$styleSliderTrackBackgroundColor}, awsui.$color-background-control-disabled);
+      background-color: track-color(
+        var(#{custom-props.$styleSliderTrackBackgroundColor}, awsui.$color-background-control-disabled)
+      );
     }
   }
 
   &-range {
-    background-color: var(
-      #{custom-props.$styleSliderRangeBackgroundDefault},
-      awsui.$color-background-slider-range-default
+    background-color: value-color(
+      var(#{custom-props.$styleSliderRangeBackgroundDefault}, awsui.$color-background-slider-range-default)
     );
     block-size: 4px;
     inline-size: calc(var(#{custom-props.$sliderRangeInlineSize}) + mixins.$thumb-size);
 
     &.error {
-      background-color: var(
-        #{custom-props.$styleSliderRangeBackgroundDefault},
-        awsui.$color-background-slider-range-error-default
+      background-color: value-color(
+        var(#{custom-props.$styleSliderRangeBackgroundDefault}, awsui.$color-background-slider-range-error-default)
       );
     }
 
     &.warning {
-      background-color: var(
-        #{custom-props.$styleSliderRangeBackgroundDefault},
-        awsui.$color-background-slider-range-warning-default
+      background-color: value-color(
+        var(#{custom-props.$styleSliderRangeBackgroundDefault}, awsui.$color-background-slider-range-warning-default)
       );
     }
 
     &.active {
-      background-color: var(
-        #{custom-props.$styleSliderRangeBackgroundActive},
-        awsui.$color-background-slider-range-active
+      background-color: value-color(
+        var(#{custom-props.$styleSliderRangeBackgroundActive}, awsui.$color-background-slider-range-active)
       );
     }
 
     &.error-active {
-      background-color: var(
-        #{custom-props.$styleSliderRangeBackgroundActive},
-        awsui.$color-background-slider-range-error-active
+      background-color: value-color(
+        var(#{custom-props.$styleSliderRangeBackgroundActive}, awsui.$color-background-slider-range-error-active)
       );
     }
 
     &.warning-active {
-      background-color: var(
-        #{custom-props.$styleSliderRangeBackgroundActive},
-        awsui.$color-background-slider-range-warning-active
+      background-color: value-color(
+        var(#{custom-props.$styleSliderRangeBackgroundActive}, awsui.$color-background-slider-range-warning-active)
       );
     }
 
     &.disabled {
-      background-color: var(
-        #{custom-props.$styleSliderRangeBackgroundDefault},
-        awsui.$color-background-control-disabled
+      background-color: value-color(
+        var(#{custom-props.$styleSliderRangeBackgroundDefault}, awsui.$color-background-control-disabled)
       );
     }
 
     &.readonly:not(&.disabled) {
       inline-size: calc(var(#{custom-props.$sliderRangeInlineSize}) + mixins.$thumb-readonly-size);
-      background-color: var(
-        #{custom-props.$styleSliderRangeBackgroundDefault},
-        awsui.$color-foreground-control-read-only
+      background-color: value-color(
+        var(#{custom-props.$styleSliderRangeBackgroundDefault}, awsui.$color-foreground-control-read-only)
       );
     }
   }
@@ -196,7 +215,9 @@
   inline-size: awsui.$space-xxxs;
   padding-inline: 0;
   padding-block: 0;
-  background: var(#{custom-props.$styleSliderTrackBackgroundColor}, awsui.$color-background-slider-track-default);
+  background: track-color(
+    var(#{custom-props.$styleSliderTrackBackgroundColor}, awsui.$color-background-slider-track-default)
+  );
   inset-block-start: -4px;
 
   &.middle {
@@ -207,51 +228,63 @@
   }
 
   &.filled {
-    background: var(#{custom-props.$styleSliderRangeBackgroundDefault}, awsui.$color-background-slider-range-default);
+    background: value-color(
+      var(#{custom-props.$styleSliderRangeBackgroundDefault}, awsui.$color-background-slider-range-default)
+    );
 
     &.readonly:not(.disabled) {
-      background: var(#{custom-props.$styleSliderTrackBackgroundColor}, awsui.$color-foreground-control-read-only);
+      background: value-color(
+        var(#{custom-props.$styleSliderTrackBackgroundColor}, awsui.$color-foreground-control-read-only)
+      );
     }
   }
 
   &.active {
-    background: var(#{custom-props.$styleSliderRangeBackgroundActive}, awsui.$color-background-slider-range-active);
+    background: value-color(
+      var(#{custom-props.$styleSliderRangeBackgroundActive}, awsui.$color-background-slider-range-active)
+    );
   }
 
   &.error {
-    background: var(
-      #{custom-props.$styleSliderTrackBackgroundColor},
-      awsui.$color-background-slider-range-error-default
+    background: value-color(
+      var(#{custom-props.$styleSliderTrackBackgroundColor}, awsui.$color-background-slider-range-error-default)
     );
   }
 
   &.warning {
-    background: var(
-      #{custom-props.$styleSliderTrackBackgroundColor},
-      awsui.$color-background-slider-range-warning-default
+    background: value-color(
+      var(#{custom-props.$styleSliderTrackBackgroundColor}, awsui.$color-background-slider-range-warning-default)
     );
   }
 
   &.error-active {
-    background-color: var(
-      #{custom-props.$styleSliderRangeBackgroundActive},
-      awsui.$color-background-slider-range-error-active
+    background-color: value-color(
+      var(#{custom-props.$styleSliderRangeBackgroundActive}, awsui.$color-background-slider-range-error-active)
     );
   }
 
   &.warning-active {
-    background-color: var(
-      #{custom-props.$styleSliderRangeBackgroundActive},
-      awsui.$color-background-slider-range-warning-active
+    background-color: value-color(
+      var(#{custom-props.$styleSliderRangeBackgroundActive}, awsui.$color-background-slider-range-warning-active)
     );
   }
 
   &.disabled {
-    background: var(#{custom-props.$styleSliderTrackBackgroundColor}, awsui.$color-background-control-disabled);
+    background: track-color(
+      var(#{custom-props.$styleSliderTrackBackgroundColor}, awsui.$color-background-control-disabled)
+    );
   }
 
   &.readonly {
-    background: var(#{custom-props.$styleSliderTrackBackgroundColor}, awsui.$color-background-control-disabled);
+    background: track-color(
+      var(#{custom-props.$styleSliderTrackBackgroundColor}, awsui.$color-background-control-disabled)
+    );
+  }
+
+  &.filled.disabled {
+    background: value-color(
+      var(#{custom-props.$styleSliderTrackBackgroundColor}, awsui.$color-background-control-disabled)
+    );
   }
 }
 
@@ -270,6 +303,7 @@
 }
 
 .thumb {
+  @include style-api.carriers(mixins.$handle-tokens);
   background: transparent;
   appearance: none;
   position: absolute;
@@ -342,24 +376,20 @@
 
 .error {
   &::-webkit-slider-thumb {
-    background-color: var(
-      #{custom-props.$styleSliderHandleBackgroundDefault},
-      awsui.$color-background-slider-handle-error-default
+    background-color: mixins.fill-color(
+      var(#{custom-props.$styleSliderHandleBackgroundDefault}, awsui.$color-background-slider-handle-error-default)
     );
-    border-color: var(
-      #{custom-props.$styleSliderHandleBackgroundDefault},
-      awsui.$color-background-slider-handle-error-default
+    border-color: mixins.fill-color(
+      var(#{custom-props.$styleSliderHandleBackgroundDefault}, awsui.$color-background-slider-handle-error-default)
     );
   }
 
   &::-moz-range-thumb {
-    background-color: var(
-      #{custom-props.$styleSliderHandleBackgroundDefault},
-      awsui.$color-background-slider-handle-error-default
+    background-color: mixins.fill-color(
+      var(#{custom-props.$styleSliderHandleBackgroundDefault}, awsui.$color-background-slider-handle-error-default)
     );
-    border-color: var(
-      #{custom-props.$styleSliderHandleBackgroundDefault},
-      awsui.$color-background-slider-handle-error-default
+    border-color: mixins.fill-color(
+      var(#{custom-props.$styleSliderHandleBackgroundDefault}, awsui.$color-background-slider-handle-error-default)
     );
   }
   &:hover::-webkit-slider-thumb {
@@ -383,24 +413,20 @@
 
 .warning {
   &::-webkit-slider-thumb {
-    background-color: var(
-      #{custom-props.$styleSliderHandleBackgroundDefault},
-      awsui.$color-background-slider-handle-warning-default
+    background-color: mixins.fill-color(
+      var(#{custom-props.$styleSliderHandleBackgroundDefault}, awsui.$color-background-slider-handle-warning-default)
     );
-    border-color: var(
-      #{custom-props.$styleSliderHandleBackgroundDefault},
-      awsui.$color-background-slider-handle-warning-default
+    border-color: mixins.fill-color(
+      var(#{custom-props.$styleSliderHandleBackgroundDefault}, awsui.$color-background-slider-handle-warning-default)
     );
   }
 
   &::-moz-range-thumb {
-    background-color: var(
-      #{custom-props.$styleSliderHandleBackgroundDefault},
-      awsui.$color-background-slider-handle-warning-default
+    background-color: mixins.fill-color(
+      var(#{custom-props.$styleSliderHandleBackgroundDefault}, awsui.$color-background-slider-handle-warning-default)
     );
-    border-color: var(
-      #{custom-props.$styleSliderHandleBackgroundDefault},
-      awsui.$color-background-slider-handle-warning-default
+    border-color: mixins.fill-color(
+      var(#{custom-props.$styleSliderHandleBackgroundDefault}, awsui.$color-background-slider-handle-warning-default)
     );
   }
   &:hover::-webkit-slider-thumb {