fix(grouping): Fix rangeslider background (#27353)

static/app/views/organizationGroupDetails/grouping/grouping.tsx

@@ -16,7 +16,9 @@ import {BaseGroup, Group, Organization} from 'app/types';
 import {defined} from 'app/utils';
 import parseLinkHeader from 'app/utils/parseLinkHeader';
 import withApi from 'app/utils/withApi';
-import RangeSlider from 'app/views/settings/components/forms/controls/rangeSlider';
+import RangeSlider, {
+  Slider,
+} from 'app/views/settings/components/forms/controls/rangeSlider';
 
 import ErrorMessage from './errorMessage';
 import NewIssue from './newIssue';
@@ -313,9 +315,22 @@ const SliderWrapper = styled('div')`
 `;
 
 const StyledRangeSlider = styled(RangeSlider)`
-  input {
+  ${Slider} {
+    background: transparent;
     margin-top: 0;
     margin-bottom: 0;
+
+    ::-ms-thumb {
+      box-shadow: 0 0 0 3px ${p => p.theme.backgroundSecondary};
+    }
+
+    ::-moz-range-thumb {
+      box-shadow: 0 0 0 3px ${p => p.theme.backgroundSecondary};
+    }
+
+    ::-webkit-slider-thumb {
+      box-shadow: 0 0 0 3px ${p => p.theme.backgroundSecondary};
+    }
   }
 
   position: absolute;

static/app/views/settings/components/forms/controls/rangeSlider.tsx

@@ -202,7 +202,7 @@ const RangeSliderContainer = React.forwardRef(function RangeSliderContainer(
 
 export default RangeSliderContainer;
 
-const Slider = styled('input')<{hasLabel: boolean}>`
+export const Slider = styled('input')<{hasLabel: boolean}>`
   /* stylelint-disable-next-line property-no-vendor-prefix */
   -webkit-appearance: none;
   width: 100%;