diff --git a/packages/raystack/components/color-picker/color-picker-alpha.tsx b/packages/raystack/components/color-picker/color-picker-alpha.tsx
index 84f915f48..351581a53 100644
--- a/packages/raystack/components/color-picker/color-picker-alpha.tsx
+++ b/packages/raystack/components/color-picker/color-picker-alpha.tsx
@@ -1,12 +1,11 @@
 'use client';
 
+import { Slider } from '@base-ui/react/slider';
 import { cx } from 'class-variance-authority';
-import { Slider } from 'radix-ui';
-import { type ComponentProps } from 'react';
-import { useColorPicker } from './color-picker-root';
 import styles from './color-picker.module.css';
+import { useColorPicker } from './color-picker-root';
 
-export type ColorPickerAlphaProps = ComponentProps<typeof Slider.Root>;
+export type ColorPickerAlphaProps = Slider.Root.Props;
 
 export const ColorPickerAlpha = ({
   className,
@@ -17,16 +16,19 @@ export const ColorPickerAlpha = ({
     <Slider.Root
       className={cx(styles.sliderRoot, className)}
       max={100}
-      onValueChange={([alpha]) => setColor({ alpha: alpha / 100 })}
+      onValueChange={value => setColor({ alpha: (value as number) / 100 })}
       step={1}
-      value={[alpha * 100]}
+      value={alpha * 100}
+      thumbAlignment='edge'
       {...props}
     >
-      <Slider.Track className={cx(styles.sliderTrack, styles.alphaTrack)}>
-        <div className={styles.alphaTrackGradient} />
-        <Slider.Range className={styles.sliderRange} />
-      </Slider.Track>
-      <Slider.Thumb className={styles.sliderThumb} />
+      <Slider.Control className={styles.sliderControl}>
+        <Slider.Track className={cx(styles.sliderTrack, styles.alphaTrack)}>
+          <div className={styles.alphaTrackGradient} />
+          <Slider.Indicator className={styles.sliderRange} />
+          <Slider.Thumb className={styles.sliderThumb} aria-label='Alpha' />
+        </Slider.Track>
+      </Slider.Control>
     </Slider.Root>
   );
 };
diff --git a/packages/raystack/components/color-picker/color-picker-hue.tsx b/packages/raystack/components/color-picker/color-picker-hue.tsx
index 47f43d18a..866280584 100644
--- a/packages/raystack/components/color-picker/color-picker-hue.tsx
+++ b/packages/raystack/components/color-picker/color-picker-hue.tsx
@@ -1,12 +1,11 @@
 'use client';
 
+import { Slider } from '@base-ui/react/slider';
 import { cx } from 'class-variance-authority';
-import { Slider } from 'radix-ui';
-import { type ComponentProps } from 'react';
-import { useColorPicker } from './color-picker-root';
 import styles from './color-picker.module.css';
+import { useColorPicker } from './color-picker-root';
 
-export type ColorPickerHueProps = ComponentProps<typeof Slider.Root>;
+export type ColorPickerHueProps = Slider.Root.Props;
 export const ColorPickerHue = ({
   className,
   ...props
@@ -16,15 +15,18 @@ export const ColorPickerHue = ({
     <Slider.Root
       className={cx(styles.sliderRoot, className)}
       max={360}
-      onValueChange={([hue]) => setColor({ h: hue })}
+      onValueChange={value => setColor({ h: value as number })}
       step={1}
-      value={[hue]}
+      value={hue}
+      thumbAlignment='edge'
       {...props}
     >
-      <Slider.Track className={cx(styles.sliderTrack, styles.hueTrack)}>
-        <Slider.Range className={styles.sliderRange} />
-      </Slider.Track>
-      <Slider.Thumb className={styles.sliderThumb} />
+      <Slider.Control className={styles.sliderControl}>
+        <Slider.Track className={cx(styles.sliderTrack, styles.hueTrack)}>
+          <Slider.Indicator className={styles.sliderRange} />
+          <Slider.Thumb className={styles.sliderThumb} aria-label='Hue' />
+        </Slider.Track>
+      </Slider.Control>
     </Slider.Root>
   );
 };
diff --git a/packages/raystack/components/color-picker/color-picker.module.css b/packages/raystack/components/color-picker/color-picker.module.css
index 8310c6515..8d6dd6011 100644
--- a/packages/raystack/components/color-picker/color-picker.module.css
+++ b/packages/raystack/components/color-picker/color-picker.module.css
@@ -6,6 +6,11 @@
   user-select: none;
   align-items: center;
 }
+.sliderControl {
+  display: flex;
+  align-items: center;
+  width: 100%;
+}
 .sliderRange {
   position: absolute;
   height: 100%;
@@ -33,6 +38,7 @@
 }
 
 .sliderThumb {
+  position: absolute;
   display: block;
   height: 12px;
   width: 12px;