feat: update rangeSlider for readability

mfrederic · Jan 11, 2025 · 81b4545 · 81b4545
1 parent 3fddf6b
commit 81b4545
Show file tree

Hide file tree

Showing 4 changed files with 16 additions and 4 deletions.
diff --git a/frontend/src/components/Common/Inputs/RangeSlider.tsx b/frontend/src/components/Common/Inputs/RangeSlider.tsx
@@ -7,7 +7,7 @@ export function RangeSlider(props: RangeSliderProps & {
   const isSmallScreen = useSmallScreen();
   return <>
     { props.textlabel &&
-      <Text size={!isSmallScreen ? 'md' : 'xl'} className="!mb-2">
+      <Text size={!isSmallScreen ? 'md' : 'xl'} className={`!mb-2 ${props.labelAlwaysOn ? '!mb-8' : ''}`}>
         { props.textlabel }
       </Text>
     }

diff --git a/frontend/src/components/Filtering/PropertyOccupations.tsx b/frontend/src/components/Filtering/PropertyOccupations.tsx
@@ -30,6 +30,12 @@ export function PropertyOccupations() {
     <RangeSlider
       textlabel={t('propertyOccupations.range') + ' (%)'}
       value={[propertyOccupations.min, propertyOccupations.max]}
+      labelAlwaysOn
+      marks={[
+        { value: 0, label: '0%' },
+        { value: 50, label: '50%' },
+        { value: 100, label: '100%' },
+      ]}
       min={0}
       max={100}
       minRange={0}

diff --git a/frontend/src/components/Filtering/PropertyYields.tsx b/frontend/src/components/Filtering/PropertyYields.tsx
@@ -31,9 +31,15 @@ export function PropertyYields() {
   return <>
     <RangeSlider
       textlabel={t('propertyYields.range') + ' (%)'}
-      value={[propertyYields.min ?? 0, propertyYields.max ?? 100]}
+      value={[propertyYields.min ?? 0, propertyYields.max ?? 20]}
+      labelAlwaysOn
+      marks={[
+        { value: 0, label: '0%' },
+        { value: 10, label: '10%' },
+        { value: 20, label: '20%+' },
+      ]}
       min={0}
-      max={100}
+      max={20}
       minRange={0}
       size={!isSmallScreen ? 'md' : 'xl'}
       onChange={(e) => onPropertyYields(e[0] as number, e[1] as number)}

diff --git a/frontend/src/utils/properties.ts b/frontend/src/utils/properties.ts
@@ -41,7 +41,7 @@ export function filterProperties(
       if (propertyYields.min > 0 && property.annualPercentageYield < propertyYields.min) {
         return false;
       }
-      if (propertyYields.max && property.annualPercentageYield > propertyYields.max) {
+      if (propertyYields.max && propertyYields.max < 20 && property.annualPercentageYield > propertyYields.max) {
         return false;
       }
       if (rentStart !== 'all') {