fix(slider): Prevent dragging in disabled state (#52601)

Attempting to drag a disabled slider's thumb results in an error:
<img width="313" alt="image"
src="https://github.com/getsentry/sentry/assets/44172267/0a1e8da0-11ca-48f7-b5af-f37b0951a0f6">
<img width="720" alt="image"
src="https://github.com/getsentry/sentry/assets/44172267/a80928a7-301d-43d2-a2a1-bdf173a435cb">

Apparently `react-aria` doesn't disable event handlers when the
component is disabled. We can fix this by just turning off pointer
events on the component.

static/app/components/slider/index.tsx

@@ -1,4 +1,5 @@
 import {forwardRef, useCallback, useImperativeHandle, useMemo, useRef} from 'react';
+import isPropValid from '@emotion/is-prop-valid';
 import styled from '@emotion/styled';
 import {useNumberFormatter} from '@react-aria/i18n';
 import {AriaSliderProps, AriaSliderThumbOptions, useSlider} from '@react-aria/slider';
@@ -227,6 +228,7 @@ function BaseSlider(
         <SliderTrack
           ref={trackRef}
           {...trackProps}
+          disabled={disabled}
           hasThumbLabels={showThumbLabels && !label}
           hasTickLabels={showTickLabels && allTickValues.length > 0}
         >
@@ -324,7 +326,14 @@ const SliderLabelOutput = styled('output')`
   color: ${p => p.theme.subText};
 `;
 
-const SliderTrack = styled('div')<{hasThumbLabels: boolean; hasTickLabels: boolean}>`
+const SliderTrack = styled('div', {
+  shouldForwardProp: prop =>
+    prop !== 'disabled' && typeof prop === 'string' && isPropValid(prop),
+})<{
+  disabled: boolean;
+  hasThumbLabels: boolean;
+  hasTickLabels: boolean;
+}>`
   position: relative;
   width: calc(100% - 2px);
   height: 3px;
@@ -335,6 +344,8 @@ const SliderTrack = styled('div')<{hasThumbLabels: boolean; hasTickLabels: boole
   margin-bottom: ${p => (p.hasTickLabels ? '2em' : '0.5rem')};
   margin-top: ${p => (p.hasThumbLabels ? '2em' : '0.5rem')};
 
+  ${p => p.disabled && `pointer-events: none;`}
+
   /* Users can click on the track to quickly jump to a value. We should extend the click
   area to make the action easier. */
   &::before {