Change the logic how to highlight the selected value

ChildMindInstitute · Mar 29, 2024 · 1a8ab05 · 1a8ab05
1 parent 492bc9f
commit 1a8ab05
Showing 1 changed file with 3 additions and 1 deletion.
diff --git a/src/shared/ui/Items/Slider/index.tsx b/src/shared/ui/Items/Slider/index.tsx
@@ -55,6 +55,8 @@ export const SliderItemBase = (props: Props) => {
     return stickLabels;
   }, [maxValue, minValue]);
 
+  const selectedValueIndex = marksAndLabelsList.findIndex((item) => item.value === Number(value));
+
   return (
     <Box width="100%" margin="auto" className={`slider-widget ${value ? 'no-value' : ''}`}>
       <Slider
@@ -110,7 +112,7 @@ export const SliderItemBase = (props: Props) => {
               backgroundColor: Theme.colors.light.primary,
             },
           },
-          [`& .MuiSlider-markLabel[data-index="${value}"]`]: {
+          [`& .MuiSlider-markLabel[data-index="${selectedValueIndex}"]`]: {
             color: Theme.colors.light.primary,
             fontWeight: 700,
           },