feat(FOROME-592): enable range slider in numbers modals

ForomePlatform · Feb 15, 2022 · 8d6d362 · 8d6d362
1 parent 4cff606
commit 8d6d362
Show file tree

Hide file tree

Showing 2 changed files with 29 additions and 1 deletion.
diff --git a/src/pages/filter/ui/modal-edit/components/modal-edit-numbers.tsx b/src/pages/filter/ui/modal-edit/components/modal-edit-numbers.tsx
@@ -5,6 +5,7 @@ import { observer } from 'mobx-react-lite'
 import { t } from '@i18n'
 import dtreeStore from '@store/dtree'
 import { InputNumber } from '@ui/input-number'
+import { RangeSlider } from '@ui/range-slider'
 import { changeNumericAttribute } from '@utils/changeAttribute/changeNumericAttribute'
 import { DropDownSelectSign } from '../../query-builder/ui/dropdown-select-sign'
 import { ExpandContentButton } from '../../query-builder/ui/expand-content-button'
@@ -36,6 +37,7 @@ export const ModalEditNumbers = observer((): ReactElement => {
 
   const minValue = attrData.min
   const maxValue = attrData.max
+  const subKind = attrData['sub-kind']
 
   const currentGroupLength: number = currentGroup.length
 
@@ -258,7 +260,20 @@ export const ModalEditNumbers = observer((): ReactElement => {
           </div>
         )}
       </div>
-
+      <RangeSlider
+        mode="range"
+        min={minValue}
+        max={maxValue}
+        value={[
+          valueFrom != null && valueFrom !== '' ? +valueFrom : null,
+          valueTo != null && valueTo !== '' ? +valueTo : null,
+        ]}
+        onChange={value => {
+          setValueFrom(value[0] != null ? value[0].toString() : '')
+          setValueTo(value[1] != null ? value[1].toString() : '')
+        }}
+        step={subKind === 'float' ? 0.001 : 1}
+      />
       <EditModalButtons
         handleClose={handleClose}
         handleSaveChanges={handleSaveChanges}

diff --git a/src/pages/filter/ui/query-builder/ui/modal-select-numbers.tsx b/src/pages/filter/ui/query-builder/ui/modal-select-numbers.tsx
@@ -6,6 +6,7 @@ import { ActionType } from '@declarations'
 import { t } from '@i18n'
 import dtreeStore from '@store/dtree'
 import { InputNumber } from '@ui/input-number'
+import { RangeSlider } from '@ui/range-slider'
 import { DecisionTreeModalDataCy } from '@components/data-testid/decision-tree-modal.cy'
 import { addAttributeToStep } from '@utils/addAttributeToStep'
 import { DropDownSelectSign } from './dropdown-select-sign'
@@ -34,6 +35,7 @@ export const ModalSelectNumbers = observer((): ReactElement => {
 
   const minValue = attrData.min
   const maxValue = attrData.max
+  const subKind = attrData['sub-kind']
 
   const [valueFrom, setValueFrom] = useState('')
   const [valueTo, setValueTo] = useState('')
@@ -245,6 +247,17 @@ export const ModalSelectNumbers = observer((): ReactElement => {
           </div>
         )}
       </div>
+      <RangeSlider
+        mode="range"
+        min={minValue}
+        max={maxValue}
+        value={[valueFrom ? +valueFrom : null, valueTo ? +valueTo : null]}
+        onChange={value => {
+          setValueFrom(value[0] != null ? value[0].toString() : '')
+          setValueTo(value[1] != null ? value[1].toString() : '')
+        }}
+        step={subKind === 'float' ? 0.001 : 1}
+      />
       <SelectModalButtons
         handleClose={handleClose}
         handleModals={handleModals}