Added plus-minus buttons to chart filter popup

grumd · Jan 7, 2024 · 4b86b56 · 4b86b56
1 parent 60d5463
commit 4b86b56
Showing 1 changed file with 59 additions and 11 deletions.
diff --git a/packages/web/src/features/leaderboards/components/search/ChartFilter.tsx b/packages/web/src/features/leaderboards/components/search/ChartFilter.tsx
@@ -59,17 +59,65 @@ export default function ChartFilter({ control }: { control: Control<SearchFormVa
             control={control}
             name="levels"
             render={({ field }) => (
-              <RangeSlider
-                mt="xl"
-                color="grape"
-                w={'100%'}
-                step={1}
-                min={1}
-                max={28}
-                minRange={0}
-                labelAlwaysOn
-                {...field}
-              />
+              <>
+                <RangeSlider
+                  mt="xl"
+                  color="grape"
+                  w={'100%'}
+                  step={1}
+                  min={1}
+                  max={28}
+                  minRange={0}
+                  labelAlwaysOn
+                  {...field}
+                />
+                <Group w="100%" gap="sm">
+                  <Button
+                    size="xs"
+                    onClick={() => {
+                      field.onChange([
+                        Math.max(1, (field.value?.[0] ?? 0) - 1),
+                        field.value?.[1] ?? 28,
+                      ]);
+                    }}
+                  >
+                    {'<'}
+                  </Button>
+                  <Button
+                    size="xs"
+                    onClick={() => {
+                      const newLeft = Math.min(28, Math.max(1, (field.value?.[0] ?? 0) + 1));
+                      field.onChange([
+                        newLeft,
+                        Math.max(newLeft, Math.min(28, field.value?.[1] ?? 28)),
+                      ]);
+                    }}
+                  >
+                    {'>'}
+                  </Button>
+                  <Button
+                    size="xs"
+                    ml="auto"
+                    onClick={() => {
+                      const newRight = Math.max(1, Math.min(28, (field.value?.[1] ?? 28) - 1));
+                      field.onChange([Math.min(newRight, field.value?.[0] ?? 1), newRight]);
+                    }}
+                  >
+                    {'<'}
+                  </Button>
+                  <Button
+                    size="xs"
+                    onClick={() => {
+                      field.onChange([
+                        field.value?.[0] ?? 1,
+                        Math.min(28, (field.value?.[1] ?? 28) + 1),
+                      ]);
+                    }}
+                  >
+                    {'>'}
+                  </Button>
+                </Group>
+              </>
             )}
           />
         </Stack>