fix(slider): thumb should not render above select dropdown (uber#5215)

* fix(slider): thumb should not render above select dropdown

* Update slider.tsx

* test(vrt): update visual snapshots for 5ef14ab (uber#5216)

Co-authored-by: UberOpenSourceBot <[email protected]>

src/slider/__tests__/slider-select-dropdown.scenario.tsx

@@ -0,0 +1,36 @@
+/*
+Copyright (c) Uber Technologies, Inc.
+
+This source code is licensed under the MIT license found in the
+LICENSE file in the root directory of this source tree.
+*/
+import * as React from 'react';
+
+import { Slider } from '..';
+import { Select } from '../../select';
+import type { Value } from '../../select';
+
+export function Scenario() {
+  const [value, setValue] = React.useState([25, 75]);
+  const [selectValue, setSelectValue] = React.useState<Value>([]);
+
+  return (
+    <>
+      <Select
+        options={[
+          { label: 'AliceBlue', id: '#F0F8FF' },
+          { label: 'AntiqueWhite', id: '#FAEBD7' },
+          { label: 'Aqua', id: '#00FFFF' },
+          { label: 'Aquamarine', id: '#7FFFD4' },
+          { label: 'Azure', id: '#F0FFFF' },
+          { label: 'Beige', id: '#F5F5DC' },
+        ]}
+        value={selectValue}
+        placeholder="Select color"
+        onChange={(params) => setSelectValue(params.value)}
+        startOpen
+      />
+      <Slider value={value} onChange={({ value }) => value && setValue(value)} />
+    </>
+  );
+}

src/slider/__tests__/slider.stories.tsx

@@ -9,6 +9,7 @@ import { Scenario as SliderCustomLabel } from './slider-custom-label.scenario';
 import { Scenario as SliderDisabled } from './slider-disabled.scenario';
 import { Scenario as SliderMarks } from './slider-marks.scenario';
 import { Scenario as SliderRange } from './slider-range.scenario';
+import { Scenario as SliderSelectDropdown } from './slider-select-dropdown.scenario';
 import { Scenario as SliderStep } from './slider-step.scenario';
 import { Scenario as SliderAlwaysShowLabel } from './slider-always-show-label.scenario';
 import { Scenario as SliderRtl } from './slider-rtl.scenario';
@@ -18,6 +19,7 @@ export const CustomLabel = () => <SliderCustomLabel />;
 export const Disabled = () => <SliderDisabled />;
 export const Marks = () => <SliderMarks />;
 export const Range = () => <SliderRange />;
+export const SelectDropdown = () => <SliderSelectDropdown />;
 export const Step = () => <SliderStep />;
 export const AlwaysShowLabel = () => <SliderAlwaysShowLabel />;
 export const Rtl = () => <SliderRtl />;

src/slider/slider.tsx

@@ -153,6 +153,7 @@ function Slider({
               $isDragged={isDragged}
               style={{
                 ...props.style,
+                zIndex: 'unset',
               }}
               {...sharedProps}
               {...thumbProps}