diff --git a/.eslintrc b/.eslintrc
index 82c9001804..1160fecd21 100644
--- a/.eslintrc
+++ b/.eslintrc
@@ -147,9 +147,12 @@
               "ListElements",  // allowed for a prop that is passed down in BpkList to the conditional list elements
               "Pointer", // allowed for a prop that is passed down in the BpkFlareBar to a generated element and necessary to continue supporting svgClassName
               "ScrimBpkModalInner", // allowed for a prop that is passed in BpkModal down to a scrim wrapped BpkModalInner component.
-              "Slider", // allowed for a prop that is passed in BpkSlider down to the react-slider component.
               "TransitionComponent", // allowed for a prop that is passed in BpkCalendarGridTransition down to a "transition" component prop.
-              "WithOpenEventsInputComponent" // allowed for a prop as consumer className is passed in
+              "WithOpenEventsInputComponent", // allowed for a prop as consumer className is passed in
+              "Slider.Root", // allowed for styling to be passed to radix-ui component
+              "Slider.Track", // allowed for styling to be passed to radix-ui component
+              "Slider.Range", // allowed for styling to be passed to radix-ui component
+              "Slider.Thumb" // allowed for styling to be passed to radix-ui component
             ]
           }
         ]
diff --git a/examples/bpk-component-slider/examples.js b/examples/bpk-component-slider/examples.js
index 719b7f8a9b..8433b206d7 100644
--- a/examples/bpk-component-slider/examples.js
+++ b/examples/bpk-component-slider/examples.js
@@ -64,12 +64,11 @@ class SliderContainer extends Component {
           min={min}
           max={time ? 59 : 100}
           step={1}
-          className="bpk-slider"
           onChange={this.handleChange}
           {...this.props}
           value={this.state.value}
           ariaLabel={['minimum', 'maximum']}
-          ariaValuetext={time ? (s) => this.valueTimeFormatter(s.value) : null}
+          ariaValuetext={[this.state.value[0], this.state.value[1]]}
         />
         <br />
       </div>
diff --git a/examples/bpk-component-slider/stories.js b/examples/bpk-component-slider/stories.js
index e983c2a4c6..bbd895359b 100644
--- a/examples/bpk-component-slider/stories.js
+++ b/examples/bpk-component-slider/stories.js
@@ -40,11 +40,13 @@ export default {
           <Title />
           <ArgsTable of={PRIMARY_STORY} />
           <Markdown>
-            {
-              `[Please refer to react-slider's documentation for a full list of props](https://zillow.github.io/react-slider/).
-              **Note:** When you're representing non-integer values (eg time, dates) please ensure you use \`ariaLabel\` and \`ariaValuetext\` to ensure that assistive technologies will be able to understand the value better.
-              `
-            }
+            {`**Note**: The aria props are the values that will be passed to the thumb of the slider. If your slider is for times for instance you would likely pass something like the following to ensure the value of the thumb is read out in a formatted state rather than just the value of where the thumb is on the track. If no \`ariaValuetext\` is passed to the component the screen reader will read just the value of the thumb
+
+            ariaLabels={['From', 'To']}
+    ariaValuetext={[getSliderTime(finalSliderStart), getSliderTime(finalSliderEnd)]}
+
+          `}
+
           </Markdown>
         </>
       )
diff --git a/packages/bpk-component-slider/README.md b/packages/bpk-component-slider/README.md
index e133a242e1..4457fff4fc 100644
--- a/packages/bpk-component-slider/README.md
+++ b/packages/bpk-component-slider/README.md
@@ -18,8 +18,8 @@ const Slider = () => (
     max={100}
     value={[20, 80]}
     step={10}
-    className={'my-class-name'}
     onChange={(value) => alert('Actual value: ' + value)}
+    ariaLabel={['min', 'max']}
   />
 );
 
diff --git a/packages/bpk-component-slider/index.d.ts b/packages/bpk-component-slider/index.d.ts
new file mode 100644
index 0000000000..aa227149ad
--- /dev/null
+++ b/packages/bpk-component-slider/index.d.ts
@@ -0,0 +1,21 @@
+/*
+ * Backpack - Skyscanner's Design System
+ *
+ * Copyright 2016 Skyscanner Ltd
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+import BpkSlider from './src/BpkSlider'
+import type { Props } from './src/BpkSlider'
+export type BpkSliderProps = Props
+export default BpkSlider
diff --git a/packages/bpk-component-slider/src/BpkSlider-test.tsx b/packages/bpk-component-slider/src/BpkSlider-test.tsx
index a1cd23136f..5bb2d473bc 100644
--- a/packages/bpk-component-slider/src/BpkSlider-test.tsx
+++ b/packages/bpk-component-slider/src/BpkSlider-test.tsx
@@ -20,7 +20,7 @@ import { render } from '@testing-library/react';
 
 import BpkSlider from './BpkSlider';
 
-// Mock the ResizeObserver which 'react-slider' uses to handle slider resize programatically 
+// Mock the ResizeObserver which 'react-slider' uses to handle slider resize programatically
 window.ResizeObserver =
   window.ResizeObserver ||
   jest.fn().mockImplementation(() => ({
@@ -30,35 +30,37 @@ window.ResizeObserver =
   }));
 
 describe('BpkSlider', () => {
+  const defaultProps = {
+    min: 0,
+    max: 100,
+    value: 25,
+    onChange: jest.fn(),
+    onAfterChange: jest.fn(),
+    ariaLabel: ['min', 'max'],
+    ariaValuetext: ['0','80']
+  }
   it('should render correctly', () => {
-    const { asFragment } = render(<BpkSlider min={0} max={100} value={25} />);
-    expect(asFragment()).toMatchSnapshot();
-  });
-
-  it('should render correctly with a "className" attribute', () => {
-    const { asFragment } = render(
-      <BpkSlider min={0} max={100} value={25} className="my-slider" />,
-    );
+    const { asFragment } = render(<BpkSlider {...defaultProps} />);
     expect(asFragment()).toMatchSnapshot();
   });
 
   it('should render correctly with a "step" attribute', () => {
     const { asFragment } = render(
-      <BpkSlider min={0} max={100} value={2} step={10} />,
+      <BpkSlider {...defaultProps} step={10} />,
     );
     expect(asFragment()).toMatchSnapshot();
   });
 
   it('should render correctly with a range of values', () => {
     const { asFragment } = render(
-      <BpkSlider min={0} max={100} value={[10, 90]} />,
+      <BpkSlider {...defaultProps} value={[10, 90]} />,
     );
     expect(asFragment()).toMatchSnapshot();
   });
 
   it('should render correctly with a minimum distance between controls', () => {
     const { asFragment } = render(
-      <BpkSlider min={0} max={100} value={[10, 90]} minDistance={20} />,
+      <BpkSlider {...defaultProps} value={[10, 90]} minDistance={20} />,
     );
     expect(asFragment()).toMatchSnapshot();
   });
diff --git a/packages/bpk-component-slider/src/BpkSlider.d.ts b/packages/bpk-component-slider/src/BpkSlider.d.ts
new file mode 100644
index 0000000000..ddd1caf117
--- /dev/null
+++ b/packages/bpk-component-slider/src/BpkSlider.d.ts
@@ -0,0 +1,21 @@
+/*
+ * Backpack - Skyscanner's Design System
+ *
+ * Copyright 2016 Skyscanner Ltd
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+import type { Props as BpkSliderProps } from './BpkSlider'
+export type Props = BpkSliderProps
+declare const BpkSlider: ({ ariaLabel, ariaValuetext, max, min, minDistance, onAfterChange, onChange, step, value }: Props) => JSX.Element
+export default BpkSlider
diff --git a/packages/bpk-component-slider/src/BpkSlider.module.scss b/packages/bpk-component-slider/src/BpkSlider.module.scss
index e2bfd711b6..bf1d7e67b4 100644
--- a/packages/bpk-component-slider/src/BpkSlider.module.scss
+++ b/packages/bpk-component-slider/src/BpkSlider.module.scss
@@ -25,18 +25,33 @@ $slider-handle-touch-size: tokens.bpk-spacing-xxl();
 $slider-bar-height: tokens.bpk-spacing-sm();
 
 .bpk-slider {
+  position: relative;
+  display: flex;
   height: $slider-handle-size;
+  align-items: center;
   -webkit-tap-highlight-color: transparent;
+  touch-action: none;
+  user-select: none;
 
-  &__handle {
-    display: flex;
+  &__track {
+    position: relative;
+    height: $slider-bar-height;
+    flex-grow: 1;
+    background-color: tokens.$bpk-line-day;
+  }
+
+  &__range {
+    position: absolute;
+    height: 100%;
+    background-color: tokens.$bpk-core-accent-day;
+  }
+
+  &__thumb {
+    display: block;
     width: $slider-handle-size;
     height: $slider-handle-size;
-    justify-content: center;
-    align-items: center;
     border-radius: 50%;
     background-color: tokens.$bpk-core-accent-day;
-    cursor: pointer;
 
     @include shadows.bpk-box-shadow-sm;
 
@@ -48,40 +63,9 @@ $slider-bar-height: tokens.bpk-spacing-sm();
       border-radius: 50%;
     }
 
-    &--active {
+    &:active {
       transform: scale(1.2) translate3d(0, 0, 0);
       background-color: tokens.$bpk-private-slider-selected-day;
     }
   }
-
-  &__bar {
-    top: calc(50% - #{$slider-bar-height * 0.5});
-    height: $slider-bar-height;
-    border-radius: tokens.$bpk-border-radius-sm;
-    background-color: tokens.$bpk-line-day;
-  }
-
-  // stylelint-disable-next-line selector-attribute-quotes
-  > div[class$='0'] {
-    @include utils.bpk-themeable-property(
-      background-color,
-      --bpk-slider-bar-color,
-      tokens.$bpk-core-accent-day
-    );
-  }
-
-  &--range {
-    // stylelint-disable-next-line selector-attribute-quotes
-    > div[class$='0'] {
-      background-color: tokens.$bpk-line-day;
-    }
-    // stylelint-disable-next-line selector-attribute-quotes
-    > div[class$='1'] {
-      @include utils.bpk-themeable-property(
-        background-color,
-        --bpk-slider-bar-color,
-        tokens.$bpk-core-accent-day
-      );
-    }
-  }
 }
diff --git a/packages/bpk-component-slider/src/BpkSlider.tsx b/packages/bpk-component-slider/src/BpkSlider.tsx
index 97cc348a00..0a779a8a96 100644
--- a/packages/bpk-component-slider/src/BpkSlider.tsx
+++ b/packages/bpk-component-slider/src/BpkSlider.tsx
@@ -16,10 +16,7 @@
  * limitations under the License.
  */
 
-import PropTypes from 'prop-types';
-
-// @ts-expect-error Untyped import. See `decisions/imports-ts-suppressions.md`.
-import Slider from 'react-slider';
+import * as Slider from '@radix-ui/react-slider';
 
 import { cssModules, isRTL } from '../../bpk-react-utils';
 
@@ -27,47 +24,79 @@ import STYLES from './BpkSlider.module.scss';
 
 const getClassName = cssModules(STYLES);
 
-type Props = {
-  className?: string | null;
+export type Props = {
+  max: number;
+  min: number;
+  minDistance?: number;
+  step?: number;
+  onChange: (value: number[] | number) => void;
+  onAfterChange?: (value: number[] | number) => void;
+  value: number[] | number;
+  ariaLabel: string[];
+  ariaValuetext?: string[];
   [rest: string]: any;
-}
+};
 
-const BpkSlider = (props: Props) => {
-  const { className, ...rest } = props;
+const BpkSlider = ({
+  ariaLabel,
+  ariaValuetext,
+  max,
+  min,
+  minDistance,
+  onAfterChange,
+  onChange,
+  step,
+  value,
+  ...rest
+}: Props) => {
   const invert = isRTL();
-  const classNames = [getClassName('bpk-slider')];
-  const thumbClassNames = [getClassName('bpk-slider__handle')];
-  const trackClassNames = [getClassName('bpk-slider__bar')];
+  const currentValue = Array.isArray(value) ? value : [value];
 
-  const isRange = (rest.value || rest.defaultValue || []).length > 1;
+  const processSliderValues = (
+    sliderValues: number[],
+    callback?: (val: number | number[]) => void,
+  ) => {
+    const val = sliderValues.length === 1 ? sliderValues[0] : sliderValues;
+    if (callback) {
+      callback(val);
+    }
+  };
 
-  if (isRange) {
-    classNames.push(getClassName('bpk-slider--range'));
-  }
-  if (className) {
-    classNames.push(getClassName(className));
-  }
+  const handleOnChange = (sliderValues: number[]) => {
+    processSliderValues(sliderValues, onChange);
+  };
+
+  const handleOnAfterChange = (sliderValues: number[]) => {
+    processSliderValues(sliderValues, onAfterChange);
+  };
 
   return (
-    <Slider
+    <Slider.Root
+      className={getClassName('bpk-slider')}
+      defaultValue={currentValue}
+      min={min}
+      max={max}
+      step={step || 1}
+      onValueChange={handleOnChange}
+      onValueCommit={handleOnAfterChange}
+      inverted={invert}
+      minStepsBetweenThumbs={minDistance}
       {...rest}
-      withTracks
-      snapDragDisabled={false}
-      invert={invert}
-      className={classNames.join(' ')}
-      thumbClassName={thumbClassNames.join(' ')}
-      thumbActiveClassName={getClassName('bpk-slider__handle--active')}
-      trackClassName={trackClassNames.join(' ')}
-    />
+    >
+      <Slider.Track className={getClassName('bpk-slider__track')}>
+        <Slider.Range className={getClassName('bpk-slider__range')} />
+      </Slider.Track>
+      {currentValue.map((val, index) => (
+        <Slider.Thumb
+          key={ariaLabel[index]}
+          aria-label={ariaLabel[index]}
+          aria-valuetext={ariaValuetext ? ariaValuetext[index] : val.toString()}
+          className={getClassName('bpk-slider__thumb')}
+          aria-valuenow={currentValue[index]}
+        />
+      ))}
+    </Slider.Root>
   );
 };
 
-BpkSlider.propTypes = {
-  className: PropTypes.string,
-};
-
-BpkSlider.defaultProps = {
-  className: null,
-};
-
 export default BpkSlider;
diff --git a/packages/bpk-component-slider/src/__snapshots__/BpkSlider-test.tsx.snap b/packages/bpk-component-slider/src/__snapshots__/BpkSlider-test.tsx.snap
index 57b9ef314a..e6b91e6716 100644
--- a/packages/bpk-component-slider/src/__snapshots__/BpkSlider-test.tsx.snap
+++ b/packages/bpk-component-slider/src/__snapshots__/BpkSlider-test.tsx.snap
@@ -2,175 +2,200 @@
 
 exports[`BpkSlider should render correctly 1`] = `
 <DocumentFragment>
-  <div
+  <span
+    aria-disabled="false"
     class="bpk-slider"
-    style="position: relative;"
+    data-orientation="horizontal"
+    dir="ltr"
+    style="--radix-slider-thumb-transform: translateX(-50%);"
   >
-    <div
-      class="bpk-slider__bar bpk-slider__bar-0"
-      style="position: absolute; left: 0px; right: 0px;"
-    />
-    <div
-      class="bpk-slider__bar bpk-slider__bar-1"
-      style="position: absolute; left: 0px; right: 0px;"
-    />
-    <div
-      aria-disabled="false"
-      aria-orientation="horizontal"
-      aria-valuemax="100"
-      aria-valuemin="0"
-      aria-valuenow="25"
-      class="bpk-slider__handle bpk-slider__handle-0 "
-      role="slider"
-      style="position: absolute; z-index: 1; left: 0px;"
-      tabindex="0"
-    />
-  </div>
-</DocumentFragment>
-`;
-
-exports[`BpkSlider should render correctly with a "className" attribute 1`] = `
-<DocumentFragment>
-  <div
-    class="bpk-slider my-slider"
-    style="position: relative;"
-  >
-    <div
-      class="bpk-slider__bar bpk-slider__bar-0"
-      style="position: absolute; left: 0px; right: 0px;"
-    />
-    <div
-      class="bpk-slider__bar bpk-slider__bar-1"
-      style="position: absolute; left: 0px; right: 0px;"
-    />
-    <div
-      aria-disabled="false"
-      aria-orientation="horizontal"
-      aria-valuemax="100"
-      aria-valuemin="0"
-      aria-valuenow="25"
-      class="bpk-slider__handle bpk-slider__handle-0 "
-      role="slider"
-      style="position: absolute; z-index: 1; left: 0px;"
-      tabindex="0"
-    />
-  </div>
+    <span
+      class="bpk-slider__track"
+      data-orientation="horizontal"
+    >
+      <span
+        class="bpk-slider__range"
+        data-orientation="horizontal"
+        style="left: 0%; right: 75%;"
+      />
+    </span>
+    <span
+      style="transform: var(--radix-slider-thumb-transform); position: absolute; left: calc(25% + 0px);"
+    >
+      <span
+        aria-label="min"
+        aria-orientation="horizontal"
+        aria-valuemax="100"
+        aria-valuemin="0"
+        aria-valuenow="25"
+        aria-valuetext="0"
+        class="bpk-slider__thumb"
+        data-orientation="horizontal"
+        data-radix-collection-item=""
+        role="slider"
+        style=""
+        tabindex="0"
+      />
+    </span>
+  </span>
 </DocumentFragment>
 `;
 
 exports[`BpkSlider should render correctly with a "step" attribute 1`] = `
 <DocumentFragment>
-  <div
+  <span
+    aria-disabled="false"
     class="bpk-slider"
-    style="position: relative;"
+    data-orientation="horizontal"
+    dir="ltr"
+    style="--radix-slider-thumb-transform: translateX(-50%);"
   >
-    <div
-      class="bpk-slider__bar bpk-slider__bar-0"
-      style="position: absolute; left: 0px; right: 0px;"
-    />
-    <div
-      class="bpk-slider__bar bpk-slider__bar-1"
-      style="position: absolute; left: 0px; right: 0px;"
-    />
-    <div
-      aria-disabled="false"
-      aria-orientation="horizontal"
-      aria-valuemax="100"
-      aria-valuemin="0"
-      aria-valuenow="0"
-      class="bpk-slider__handle bpk-slider__handle-0 "
-      role="slider"
-      style="position: absolute; z-index: 1; left: 0px;"
-      tabindex="0"
-    />
-  </div>
+    <span
+      class="bpk-slider__track"
+      data-orientation="horizontal"
+    >
+      <span
+        class="bpk-slider__range"
+        data-orientation="horizontal"
+        style="left: 0%; right: 75%;"
+      />
+    </span>
+    <span
+      style="transform: var(--radix-slider-thumb-transform); position: absolute; left: calc(25% + 0px);"
+    >
+      <span
+        aria-label="min"
+        aria-orientation="horizontal"
+        aria-valuemax="100"
+        aria-valuemin="0"
+        aria-valuenow="25"
+        aria-valuetext="0"
+        class="bpk-slider__thumb"
+        data-orientation="horizontal"
+        data-radix-collection-item=""
+        role="slider"
+        style=""
+        tabindex="0"
+      />
+    </span>
+  </span>
 </DocumentFragment>
 `;
 
 exports[`BpkSlider should render correctly with a minimum distance between controls 1`] = `
 <DocumentFragment>
-  <div
-    class="bpk-slider bpk-slider--range"
-    style="position: relative;"
+  <span
+    aria-disabled="false"
+    class="bpk-slider"
+    data-orientation="horizontal"
+    dir="ltr"
+    style="--radix-slider-thumb-transform: translateX(-50%);"
   >
-    <div
-      class="bpk-slider__bar bpk-slider__bar-0"
-      style="position: absolute; left: 0px; right: 0px;"
-    />
-    <div
-      class="bpk-slider__bar bpk-slider__bar-1"
-      style="position: absolute; left: 0px; right: 0px;"
-    />
-    <div
-      class="bpk-slider__bar bpk-slider__bar-2"
-      style="position: absolute; left: 0px; right: 0px;"
-    />
-    <div
-      aria-disabled="false"
-      aria-orientation="horizontal"
-      aria-valuemax="100"
-      aria-valuemin="0"
-      aria-valuenow="10"
-      class="bpk-slider__handle bpk-slider__handle-0 "
-      role="slider"
-      style="position: absolute; z-index: 1; left: 0px;"
-      tabindex="0"
-    />
-    <div
-      aria-disabled="false"
-      aria-orientation="horizontal"
-      aria-valuemax="100"
-      aria-valuemin="0"
-      aria-valuenow="90"
-      class="bpk-slider__handle bpk-slider__handle-1 "
-      role="slider"
-      style="position: absolute; z-index: 2; left: 0px;"
-      tabindex="0"
-    />
-  </div>
+    <span
+      class="bpk-slider__track"
+      data-orientation="horizontal"
+    >
+      <span
+        class="bpk-slider__range"
+        data-orientation="horizontal"
+        style="left: 10%; right: 10%;"
+      />
+    </span>
+    <span
+      style="transform: var(--radix-slider-thumb-transform); position: absolute; left: calc(10% + 0px);"
+    >
+      <span
+        aria-label="min"
+        aria-orientation="horizontal"
+        aria-valuemax="100"
+        aria-valuemin="0"
+        aria-valuenow="10"
+        aria-valuetext="0"
+        class="bpk-slider__thumb"
+        data-orientation="horizontal"
+        data-radix-collection-item=""
+        role="slider"
+        style=""
+        tabindex="0"
+      />
+    </span>
+    <span
+      style="transform: var(--radix-slider-thumb-transform); position: absolute; left: calc(90% + 0px);"
+    >
+      <span
+        aria-label="max"
+        aria-orientation="horizontal"
+        aria-valuemax="100"
+        aria-valuemin="0"
+        aria-valuenow="90"
+        aria-valuetext="80"
+        class="bpk-slider__thumb"
+        data-orientation="horizontal"
+        data-radix-collection-item=""
+        role="slider"
+        style=""
+        tabindex="0"
+      />
+    </span>
+  </span>
 </DocumentFragment>
 `;
 
 exports[`BpkSlider should render correctly with a range of values 1`] = `
 <DocumentFragment>
-  <div
-    class="bpk-slider bpk-slider--range"
-    style="position: relative;"
+  <span
+    aria-disabled="false"
+    class="bpk-slider"
+    data-orientation="horizontal"
+    dir="ltr"
+    style="--radix-slider-thumb-transform: translateX(-50%);"
   >
-    <div
-      class="bpk-slider__bar bpk-slider__bar-0"
-      style="position: absolute; left: 0px; right: 0px;"
-    />
-    <div
-      class="bpk-slider__bar bpk-slider__bar-1"
-      style="position: absolute; left: 0px; right: 0px;"
-    />
-    <div
-      class="bpk-slider__bar bpk-slider__bar-2"
-      style="position: absolute; left: 0px; right: 0px;"
-    />
-    <div
-      aria-disabled="false"
-      aria-orientation="horizontal"
-      aria-valuemax="100"
-      aria-valuemin="0"
-      aria-valuenow="10"
-      class="bpk-slider__handle bpk-slider__handle-0 "
-      role="slider"
-      style="position: absolute; z-index: 1; left: 0px;"
-      tabindex="0"
-    />
-    <div
-      aria-disabled="false"
-      aria-orientation="horizontal"
-      aria-valuemax="100"
-      aria-valuemin="0"
-      aria-valuenow="90"
-      class="bpk-slider__handle bpk-slider__handle-1 "
-      role="slider"
-      style="position: absolute; z-index: 2; left: 0px;"
-      tabindex="0"
-    />
-  </div>
+    <span
+      class="bpk-slider__track"
+      data-orientation="horizontal"
+    >
+      <span
+        class="bpk-slider__range"
+        data-orientation="horizontal"
+        style="left: 10%; right: 10%;"
+      />
+    </span>
+    <span
+      style="transform: var(--radix-slider-thumb-transform); position: absolute; left: calc(10% + 0px);"
+    >
+      <span
+        aria-label="min"
+        aria-orientation="horizontal"
+        aria-valuemax="100"
+        aria-valuemin="0"
+        aria-valuenow="10"
+        aria-valuetext="0"
+        class="bpk-slider__thumb"
+        data-orientation="horizontal"
+        data-radix-collection-item=""
+        role="slider"
+        style=""
+        tabindex="0"
+      />
+    </span>
+    <span
+      style="transform: var(--radix-slider-thumb-transform); position: absolute; left: calc(90% + 0px);"
+    >
+      <span
+        aria-label="max"
+        aria-orientation="horizontal"
+        aria-valuemax="100"
+        aria-valuemin="0"
+        aria-valuenow="90"
+        aria-valuetext="80"
+        class="bpk-slider__thumb"
+        data-orientation="horizontal"
+        data-radix-collection-item=""
+        role="slider"
+        style=""
+        tabindex="0"
+      />
+    </span>
+  </span>
 </DocumentFragment>
 `;
diff --git a/packages/bpk-component-slider/src/accessibility-test.tsx b/packages/bpk-component-slider/src/accessibility-test.tsx
index 76860c3937..b321b6a28a 100644
--- a/packages/bpk-component-slider/src/accessibility-test.tsx
+++ b/packages/bpk-component-slider/src/accessibility-test.tsx
@@ -30,11 +30,14 @@ window.ResizeObserver =
   }));
 
 describe('BpkSlider accessibility tests', () => {
-  /*
-  Currently this test fails because the third-party library
-  we're using doesn't pass down the ARIA props we add.
-  We should investigate and fix this so we can reinstate the test.
-  */
+    const defaultProps = {
+    min: 0,
+    max: 100,
+    value: 25,
+    step: 10,
+    onChange: jest.fn(),
+    onAfterChange: jest.fn(),
+  }
   it('should not have programmatically-detectable accessibility issues', async () => {
     const { container } = render(
       <div>
@@ -42,14 +45,15 @@ describe('BpkSlider accessibility tests', () => {
           Slider
         </label>
         <BpkSlider
+          {...defaultProps}
           ariaLabelledby="label"
           id="slider"
-          min={0}
-          max={100}
-          value={25}
+          ariaLabel={['time']}
+          ariaValuetext={['25']}
         />
       </div>,
     );
+
     const results = await axe(container);
     expect(results).toHaveNoViolations();
   });
@@ -61,13 +65,16 @@ describe('BpkSlider accessibility tests', () => {
           Range Slider
         </label>
         <BpkSlider
+          {...defaultProps}
           ariaLabelledby="range-label"
           id="range-slider"
-          min={0}
-          value={[20, 80]}
+          value={[0, 1290]}
+          ariaLabel={['from', 'to']}
+          ariaValuetext={['00:00', '21:30']}
         />
       </div>,
     );
+
     const results = await axe(container);
     expect(results).toHaveNoViolations();
   });
diff --git a/packages/package-lock.json b/packages/package-lock.json
index 24573088ed..2dfa8fac06 100644
--- a/packages/package-lock.json
+++ b/packages/package-lock.json
@@ -11,6 +11,7 @@
       "dependencies": {
         "@floating-ui/react": "^0.26.12",
         "@popperjs/core": "^2.11.8",
+        "@radix-ui/react-slider": "^1.1.2",
         "@react-google-maps/api": "^2.12.0",
         "@skyscanner/bpk-foundations-web": "^17.11.0",
         "@skyscanner/bpk-svgs": "^19.3.0",
@@ -27,7 +28,6 @@
         "object-assign": "^4.1.1",
         "prop-types": "^15.7.2",
         "react-autosuggest": "^9.4.3",
-        "react-slider": "^2.0.6",
         "react-table": "^7.8.0",
         "react-virtualized-auto-sizer": "1.0.20",
         "react-window": "^1.8.7"
@@ -138,6 +138,260 @@
       "resolved": "https://registry.npmjs.org/@popperjs/core/-/core-2.11.8.tgz",
       "integrity": "sha512-P1st0aksCrn9sGZhp8GMYwBnQsbvAWsZAX44oXNNvLHGqAOcoVxmjZiohstwQ7SqKnbR47akdNi+uleWD8+g6A=="
     },
+    "node_modules/@radix-ui/number": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/@radix-ui/number/-/number-1.0.1.tgz",
+      "integrity": "sha512-T5gIdVO2mmPW3NNhjNgEP3cqMXjXL9UbO0BzWcXfvdBs+BohbQxvd/K5hSVKmn9/lbTdsQVKbUcP5WLCwvUbBg==",
+      "dependencies": {
+        "@babel/runtime": "^7.13.10"
+      }
+    },
+    "node_modules/@radix-ui/primitive": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/@radix-ui/primitive/-/primitive-1.0.1.tgz",
+      "integrity": "sha512-yQ8oGX2GVsEYMWGxcovu1uGWPCxV5BFfeeYxqPmuAzUyLT9qmaMXSAhXpb0WrspIeqYzdJpkh2vHModJPgRIaw==",
+      "dependencies": {
+        "@babel/runtime": "^7.13.10"
+      }
+    },
+    "node_modules/@radix-ui/react-collection": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-collection/-/react-collection-1.0.3.tgz",
+      "integrity": "sha512-3SzW+0PW7yBBoQlT8wNcGtaxaD0XSu0uLUFgrtHY08Acx05TaHaOmVLR73c0j/cqpDy53KBMO7s0dx2wmOIDIA==",
+      "dependencies": {
+        "@babel/runtime": "^7.13.10",
+        "@radix-ui/react-compose-refs": "1.0.1",
+        "@radix-ui/react-context": "1.0.1",
+        "@radix-ui/react-primitive": "1.0.3",
+        "@radix-ui/react-slot": "1.0.2"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0",
+        "react-dom": "^16.8 || ^17.0 || ^18.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-compose-refs": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-compose-refs/-/react-compose-refs-1.0.1.tgz",
+      "integrity": "sha512-fDSBgd44FKHa1FRMU59qBMPFcl2PZE+2nmqunj+BWFyYYjnhIDWL2ItDs3rrbJDQOtzt5nIebLCQc4QRfz6LJw==",
+      "dependencies": {
+        "@babel/runtime": "^7.13.10"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-context": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-context/-/react-context-1.0.1.tgz",
+      "integrity": "sha512-ebbrdFoYTcuZ0v4wG5tedGnp9tzcV8awzsxYph7gXUyvnNLuTIcCk1q17JEbnVhXAKG9oX3KtchwiMIAYp9NLg==",
+      "dependencies": {
+        "@babel/runtime": "^7.13.10"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-direction": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-direction/-/react-direction-1.0.1.tgz",
+      "integrity": "sha512-RXcvnXgyvYvBEOhCBuddKecVkoMiI10Jcm5cTI7abJRAHYfFxeu+FBQs/DvdxSYucxR5mna0dNsL6QFlds5TMA==",
+      "dependencies": {
+        "@babel/runtime": "^7.13.10"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-primitive": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-primitive/-/react-primitive-1.0.3.tgz",
+      "integrity": "sha512-yi58uVyoAcK/Nq1inRY56ZSjKypBNKTa/1mcL8qdl6oJeEaDbOldlzrGn7P6Q3Id5d+SYNGc5AJgc4vGhjs5+g==",
+      "dependencies": {
+        "@babel/runtime": "^7.13.10",
+        "@radix-ui/react-slot": "1.0.2"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0",
+        "react-dom": "^16.8 || ^17.0 || ^18.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-slider": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-slider/-/react-slider-1.1.2.tgz",
+      "integrity": "sha512-NKs15MJylfzVsCagVSWKhGGLNR1W9qWs+HtgbmjjVUB3B9+lb3PYoXxVju3kOrpf0VKyVCtZp+iTwVoqpa1Chw==",
+      "dependencies": {
+        "@babel/runtime": "^7.13.10",
+        "@radix-ui/number": "1.0.1",
+        "@radix-ui/primitive": "1.0.1",
+        "@radix-ui/react-collection": "1.0.3",
+        "@radix-ui/react-compose-refs": "1.0.1",
+        "@radix-ui/react-context": "1.0.1",
+        "@radix-ui/react-direction": "1.0.1",
+        "@radix-ui/react-primitive": "1.0.3",
+        "@radix-ui/react-use-controllable-state": "1.0.1",
+        "@radix-ui/react-use-layout-effect": "1.0.1",
+        "@radix-ui/react-use-previous": "1.0.1",
+        "@radix-ui/react-use-size": "1.0.1"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0",
+        "react-dom": "^16.8 || ^17.0 || ^18.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-slot": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-slot/-/react-slot-1.0.2.tgz",
+      "integrity": "sha512-YeTpuq4deV+6DusvVUW4ivBgnkHwECUu0BiN43L5UCDFgdhsRUWAghhTF5MbvNTPzmiFOx90asDSUjWuCNapwg==",
+      "dependencies": {
+        "@babel/runtime": "^7.13.10",
+        "@radix-ui/react-compose-refs": "1.0.1"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-use-callback-ref": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-use-callback-ref/-/react-use-callback-ref-1.0.1.tgz",
+      "integrity": "sha512-D94LjX4Sp0xJFVaoQOd3OO9k7tpBYNOXdVhkltUbGv2Qb9OXdrg/CpsjlZv7ia14Sylv398LswWBVVu5nqKzAQ==",
+      "dependencies": {
+        "@babel/runtime": "^7.13.10"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-use-controllable-state": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-use-controllable-state/-/react-use-controllable-state-1.0.1.tgz",
+      "integrity": "sha512-Svl5GY5FQeN758fWKrjM6Qb7asvXeiZltlT4U2gVfl8Gx5UAv2sMR0LWo8yhsIZh2oQ0eFdZ59aoOOMV7b47VA==",
+      "dependencies": {
+        "@babel/runtime": "^7.13.10",
+        "@radix-ui/react-use-callback-ref": "1.0.1"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-use-layout-effect": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-use-layout-effect/-/react-use-layout-effect-1.0.1.tgz",
+      "integrity": "sha512-v/5RegiJWYdoCvMnITBkNNx6bCj20fiaJnWtRkU18yITptraXjffz5Qbn05uOiQnOvi+dbkznkoaMltz1GnszQ==",
+      "dependencies": {
+        "@babel/runtime": "^7.13.10"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-use-previous": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-use-previous/-/react-use-previous-1.0.1.tgz",
+      "integrity": "sha512-cV5La9DPwiQ7S0gf/0qiD6YgNqM5Fk97Kdrlc5yBcrF3jyEZQwm7vYFqMo4IfeHgJXsRaMvLABFtd0OVEmZhDw==",
+      "dependencies": {
+        "@babel/runtime": "^7.13.10"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-use-size": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-use-size/-/react-use-size-1.0.1.tgz",
+      "integrity": "sha512-ibay+VqrgcaI6veAojjofPATwledXiSmX+C0KrBk/xgpX9rBzPV3OsfwlhQdUOFbh+LKQorLYT+xTXW9V8yd0g==",
+      "dependencies": {
+        "@babel/runtime": "^7.13.10",
+        "@radix-ui/react-use-layout-effect": "1.0.1"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/@react-google-maps/api": {
       "version": "2.19.3",
       "resolved": "https://registry.npmjs.org/@react-google-maps/api/-/api-2.19.3.tgz",
@@ -517,17 +771,6 @@
       "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
       "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ=="
     },
-    "node_modules/react-slider": {
-      "version": "2.0.6",
-      "resolved": "https://registry.npmjs.org/react-slider/-/react-slider-2.0.6.tgz",
-      "integrity": "sha512-gJxG1HwmuMTJ+oWIRCmVWvgwotNCbByTwRkFZC6U4MBsHqJBmxwbYRJUmxy4Tke1ef8r9jfXjgkmY/uHOCEvbA==",
-      "dependencies": {
-        "prop-types": "^15.8.1"
-      },
-      "peerDependencies": {
-        "react": "^16 || ^17 || ^18"
-      }
-    },
     "node_modules/react-table": {
       "version": "7.8.0",
       "resolved": "https://registry.npmjs.org/react-table/-/react-table-7.8.0.tgz",
diff --git a/packages/package.json b/packages/package.json
index 6ef89092bd..2cb63117cc 100644
--- a/packages/package.json
+++ b/packages/package.json
@@ -24,6 +24,7 @@
   "dependencies": {
     "@floating-ui/react": "^0.26.12",
     "@popperjs/core": "^2.11.8",
+    "@radix-ui/react-slider": "^1.1.2",
     "@react-google-maps/api": "^2.12.0",
     "@skyscanner/bpk-foundations-web": "^17.11.0",
     "@skyscanner/bpk-svgs": "^19.3.0",
@@ -40,7 +41,6 @@
     "object-assign": "^4.1.1",
     "prop-types": "^15.7.2",
     "react-autosuggest": "^9.4.3",
-    "react-slider": "^2.0.6",
     "react-table": "^7.8.0",
     "react-virtualized-auto-sizer": "1.0.20",
     "react-window": "^1.8.7"