@aehrc/smart-forms-renderer 0.8.0 → 0.9.0

package/src/components/FormComponents/RepeatItem/RepeatItem.tsx

@@ -16,7 +16,11 @@
  */
 
 import React, { useState } from 'react';
-import type { PropsWithQrItemChangeHandler } from '../../../interfaces/renderProps.interface';
+import type {
+  PropsWithParentIsReadOnlyAttribute,
+  PropsWithQrItemChangeHandler
+} from '../../../interfaces/renderProps.interface';
+import type { PropsWithShowMinimalViewAttribute } from '../../../interfaces/renderProps.interface';
 import type { QuestionnaireItem, QuestionnaireResponseItem } from 'fhir/r4';
 import { nanoid } from 'nanoid';
 import useRenderingExtensions from '../../../hooks/useRenderingExtensions';
@@ -28,16 +32,20 @@ import RepeatField from './RepeatField';
 import Collapse from '@mui/material/Collapse';
 import useInitialiseRepeatAnswers from '../../../hooks/useInitialiseRepeatAnswers';
 import ItemFieldGrid from '../ItemParts/ItemFieldGrid';
+import useReadOnly from '../../../hooks/useReadOnly';
 
-interface RepeatItemProps extends PropsWithQrItemChangeHandler<QuestionnaireResponseItem> {
+interface RepeatItemProps
+  extends PropsWithQrItemChangeHandler,
+    PropsWithShowMinimalViewAttribute,
+    PropsWithParentIsReadOnlyAttribute {
   qItem: QuestionnaireItem;
-  qrItem: QuestionnaireResponseItem;
+  qrItem: QuestionnaireResponseItem | null;
 }
 
 function RepeatItem(props: RepeatItemProps) {
-  const { qItem, qrItem, onQrItemChange } = props;
+  const { qItem, qrItem, showMinimalView, parentIsReadOnly, onQrItemChange } = props;
 
-  // Get additional rendering extensions
+  const readOnly = useReadOnly(qItem, parentIsReadOnly);
   const { displayInstructions } = useRenderingExtensions(qItem);
 
   const initialRepeatAnswers = useInitialiseRepeatAnswers(qItem, qrItem);
@@ -82,9 +90,36 @@ function RepeatItem(props: RepeatItemProps) {
     ]);
   }
 
+  if (showMinimalView) {
+    return (
+      <>
+        {repeatAnswers.map(({ nanoId, answer }, index) => {
+          const repeatAnswerQrItem = createEmptyQrItem(qItem);
+          if (answer) {
+            repeatAnswerQrItem.answer = [answer];
+          }
+
+          return (
+            <RepeatField
+              key={nanoId}
+              qItem={qItem}
+              qrItem={repeatAnswerQrItem}
+              answer={answer}
+              numOfRepeatAnswers={repeatAnswers.length}
+              parentIsReadOnly={parentIsReadOnly}
+              showMinimalView={showMinimalView}
+              onDeleteAnswer={() => handleDeleteItem(index)}
+              onQrItemChange={(newQrItem) => handleAnswerChange(newQrItem, index)}
+            />
+          );
+        })}
+      </>
+    );
+  }
+
   return (
     <FullWidthFormComponentBox data-test="q-item-repeat-box">
-      <ItemFieldGrid qItem={qItem} displayInstructions={displayInstructions}>
+      <ItemFieldGrid qItem={qItem} displayInstructions={displayInstructions} readOnly={readOnly}>
         <TransitionGroup>
           {repeatAnswers.map(({ nanoId, answer }, index) => {
             const repeatAnswerQrItem = createEmptyQrItem(qItem);
@@ -99,6 +134,8 @@ function RepeatItem(props: RepeatItemProps) {
                   qrItem={repeatAnswerQrItem}
                   answer={answer}
                   numOfRepeatAnswers={repeatAnswers.length}
+                  parentIsReadOnly={parentIsReadOnly}
+                  showMinimalView={showMinimalView}
                   onDeleteAnswer={() => handleDeleteItem(index)}
                   onQrItemChange={(newQrItem) => handleAnswerChange(newQrItem, index)}
                 />
@@ -108,7 +145,7 @@ function RepeatItem(props: RepeatItemProps) {
         </TransitionGroup>
       </ItemFieldGrid>
 
-      <AddItemButton repeatAnswers={repeatAnswers} onAddItem={handleAddItem} />
+      <AddItemButton repeatAnswers={repeatAnswers} readOnly={readOnly} onAddItem={handleAddItem} />
     </FullWidthFormComponentBox>
   );
 }

package/src/components/FormComponents/RepeatItem/index.ts

@@ -0,0 +1,18 @@
+/*
+ * Copyright 2023 Commonwealth Scientific and Industrial Research
+ * Organisation (CSIRO) ABN 41 687 119 230.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+export { default as RepeatItem } from './RepeatItem';

package/src/components/FormComponents/SingleItem/SingleItem.tsx

@@ -20,24 +20,28 @@ import type { QuestionnaireItem, QuestionnaireResponseItem } from 'fhir/r4';
 import type {
   PropsWithIsRepeatedAttribute,
   PropsWithIsTabledAttribute,
+  PropsWithParentIsReadOnlyAttribute,
   PropsWithQrItemChangeHandler,
-  PropsWithTextShownAttribute
+  PropsWithShowMinimalViewAttribute
 } from '../../../interfaces/renderProps.interface';
 import useQuestionnaireStore from '../../../stores/useQuestionnaireStore';
 import SingleItemSwitcher from './SingleItemSwitcher';
 import useHidden from '../../../hooks/useHidden';
+import useReadOnly from '../../../hooks/useReadOnly';
 
 interface SingleItemProps
-  extends PropsWithQrItemChangeHandler<QuestionnaireResponseItem>,
+  extends PropsWithQrItemChangeHandler,
     PropsWithIsRepeatedAttribute,
     PropsWithIsTabledAttribute,
-    PropsWithTextShownAttribute {
+    PropsWithShowMinimalViewAttribute,
+    PropsWithParentIsReadOnlyAttribute {
   qItem: QuestionnaireItem;
-  qrItem: QuestionnaireResponseItem;
+  qrItem: QuestionnaireResponseItem | null;
 }
 
 function SingleItem(props: SingleItemProps) {
-  const { qItem, qrItem, isRepeated, isTabled, textShown, onQrItemChange } = props;
+  const { qItem, qrItem, isRepeated, isTabled, showMinimalView, parentIsReadOnly, onQrItemChange } =
+    props;
 
   const updateEnableWhenItem = useQuestionnaireStore((state) => state.updateEnableWhenItem);
 
@@ -51,6 +55,7 @@ function SingleItem(props: SingleItemProps) {
     [updateEnableWhenItem, onQrItemChange, qItem.linkId]
   );
 
+  const readOnly = useReadOnly(qItem, parentIsReadOnly);
   const itemIsHidden = useHidden(qItem);
   if (itemIsHidden) {
     return null;
@@ -62,7 +67,8 @@ function SingleItem(props: SingleItemProps) {
       qrItem={qrItem}
       isRepeated={isRepeated}
       isTabled={isTabled}
-      textShown={textShown}
+      showMinimalView={showMinimalView}
+      parentIsReadOnly={readOnly}
       onQrItemChange={handleQrItemChange}
     />
   );

package/src/components/FormComponents/SingleItem/SingleItemSwitcher.tsx

@@ -23,31 +23,36 @@ import Typography from '@mui/material/Typography';
 import type {
   PropsWithIsRepeatedAttribute,
   PropsWithIsTabledAttribute,
+  PropsWithParentIsReadOnlyAttribute,
   PropsWithQrItemChangeHandler,
-  PropsWithTextShownAttribute
+  PropsWithShowMinimalViewAttribute
 } from '../../../interfaces/renderProps.interface';
 import StringItem from '../StringItem/StringItem';
 import BooleanItem from '../BooleanItem/BooleanItem';
 import TimeItem from '../TimeItem/TimeItem';
 import DateTimeItem from '../DateTimeItem/DateTimeItem';
-import DateItem from '../DateItem/DateItem';
 import TextItem from '../TextItem/TextItem';
 import DisplayItem from '../DisplayItem/DisplayItem';
-import IntegerItem from '../IntegerItem/IntegerItem';
 import DecimalItem from '../DecimalItem/DecimalItem';
 import UrlItem from '../UrlItem/UrlItem';
+import CustomDateItem from '../CustomDateItem/CustomDateItem';
+import { isSpecificItemControl } from '../../../utils';
+import SliderItem from '../SliderItem/SliderItem';
+import IntegerItem from '../IntegerItem/IntegerItem';
 
 interface SingleItemSwitcherProps
-  extends PropsWithQrItemChangeHandler<QuestionnaireResponseItem>,
+  extends PropsWithQrItemChangeHandler,
     PropsWithIsRepeatedAttribute,
     PropsWithIsTabledAttribute,
-    PropsWithTextShownAttribute {
+    PropsWithShowMinimalViewAttribute,
+    PropsWithParentIsReadOnlyAttribute {
   qItem: QuestionnaireItem;
-  qrItem: QuestionnaireResponseItem;
+  qrItem: QuestionnaireResponseItem | null;
 }
 
 function SingleItemSwitcher(props: SingleItemSwitcherProps) {
-  const { qItem, qrItem, isRepeated, isTabled, textShown, onQrItemChange } = props;
+  const { qItem, qrItem, isRepeated, isTabled, showMinimalView, parentIsReadOnly, onQrItemChange } =
+    props;
 
   switch (qItem.type) {
     case 'string':
@@ -57,6 +62,7 @@ function SingleItemSwitcher(props: SingleItemSwitcherProps) {
           qrItem={qrItem}
           isRepeated={isRepeated}
           isTabled={isTabled}
+          parentIsReadOnly={parentIsReadOnly}
           onQrItemChange={onQrItemChange}
         />
       );
@@ -67,6 +73,7 @@ function SingleItemSwitcher(props: SingleItemSwitcherProps) {
           qrItem={qrItem}
           isRepeated={isRepeated}
           isTabled={isTabled}
+          parentIsReadOnly={parentIsReadOnly}
           onQrItemChange={onQrItemChange}
         />
       );
@@ -77,16 +84,18 @@ function SingleItemSwitcher(props: SingleItemSwitcherProps) {
           qrItem={qrItem}
           isRepeated={isRepeated}
           isTabled={isTabled}
+          parentIsReadOnly={parentIsReadOnly}
           onQrItemChange={onQrItemChange}
         />
       );
     case 'date':
       return (
-        <DateItem
+        <CustomDateItem
           qItem={qItem}
           qrItem={qrItem}
           isRepeated={isRepeated}
           isTabled={isTabled}
+          parentIsReadOnly={parentIsReadOnly}
           onQrItemChange={onQrItemChange}
         />
       );
@@ -97,6 +106,7 @@ function SingleItemSwitcher(props: SingleItemSwitcherProps) {
           qrItem={qrItem}
           isRepeated={isRepeated}
           isTabled={isTabled}
+          parentIsReadOnly={parentIsReadOnly}
           onQrItemChange={onQrItemChange}
         />
       );
@@ -106,18 +116,33 @@ function SingleItemSwitcher(props: SingleItemSwitcherProps) {
           qItem={qItem}
           qrItem={qrItem}
           isRepeated={isRepeated}
+          parentIsReadOnly={parentIsReadOnly}
           onQrItemChange={onQrItemChange}
         />
       );
     case 'display':
       return <DisplayItem qItem={qItem} />;
     case 'integer':
+      if (isSpecificItemControl(qItem, 'slider')) {
+        return (
+          <SliderItem
+            qItem={qItem}
+            qrItem={qrItem}
+            isRepeated={isRepeated}
+            isTabled={isTabled}
+            parentIsReadOnly={parentIsReadOnly}
+            onQrItemChange={onQrItemChange}
+          />
+        );
+      }
+
       return (
         <IntegerItem
           qItem={qItem}
           qrItem={qrItem}
           isRepeated={isRepeated}
           isTabled={isTabled}
+          parentIsReadOnly={parentIsReadOnly}
           onQrItemChange={onQrItemChange}
         />
       );
@@ -128,6 +153,7 @@ function SingleItemSwitcher(props: SingleItemSwitcherProps) {
           qrItem={qrItem}
           isRepeated={isRepeated}
           isTabled={isTabled}
+          parentIsReadOnly={parentIsReadOnly}
           onQrItemChange={onQrItemChange}
         />
       );
@@ -138,7 +164,8 @@ function SingleItemSwitcher(props: SingleItemSwitcherProps) {
           qrItem={qrItem}
           isRepeated={isRepeated}
           isTabled={isTabled}
-          textShown={textShown}
+          showMinimalView={showMinimalView}
+          parentIsReadOnly={parentIsReadOnly}
           onQrItemChange={onQrItemChange}
         />
       );
@@ -149,7 +176,8 @@ function SingleItemSwitcher(props: SingleItemSwitcherProps) {
           qrItem={qrItem}
           isRepeated={isRepeated}
           isTabled={isTabled}
-          textShown={textShown}
+          showMinimalView={showMinimalView}
+          parentIsReadOnly={parentIsReadOnly}
           onQrItemChange={onQrItemChange}
         />
       );
@@ -160,13 +188,15 @@ function SingleItemSwitcher(props: SingleItemSwitcherProps) {
           qrItem={qrItem}
           isRepeated={isRepeated}
           isTabled={isTabled}
+          parentIsReadOnly={parentIsReadOnly}
           onQrItemChange={onQrItemChange}
         />
       );
     default:
       return (
         <Typography>
-          Item type not supported yet. Only R4 datatypes are supported at the moment.
+          Item type not supported yet, or something has went wrong. If your questionnnaire is not a
+          FHIR R4 resource, there might be issues rendering it.
         </Typography>
       );
   }

package/src/components/FormComponents/SliderItem/Slider.styles.ts

@@ -0,0 +1,34 @@
+/*
+ * Copyright 2023 Commonwealth Scientific and Industrial Research
+ * Organisation (CSIRO) ABN 41 687 119 230.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { alpha, styled } from '@mui/material/styles';
+import { Box } from '@mui/material';
+
+export const SliderDisplayBox = styled(Box, {
+  shouldForwardProp: (prop) => prop !== 'hasLabels'
+})<{ hasLabels: boolean }>(({ theme, hasLabels }) => ({
+  display: 'flex',
+  alignItems: 'center',
+  justifyContent: 'center',
+  margin: '0 auto',
+  marginBottom: hasLabels ? -20 : 0,
+  padding: theme.spacing(0.5),
+  borderRadius: Number(theme.shape.borderRadius) * 0.5,
+  border: `1px solid ${alpha(theme.palette.text.disabled, 0.5)}`,
+  minWidth: 28,
+  height: 18
+}));

package/src/components/FormComponents/SliderItem/SliderDisplayValue.tsx

@@ -0,0 +1,43 @@
+/*
+ * Copyright 2023 Commonwealth Scientific and Industrial Research
+ * Organisation (CSIRO) ABN 41 687 119 230.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import React from 'react';
+import { SliderDisplayBox } from './Slider.styles';
+import Typography from '@mui/material/Typography';
+import { pxToRem } from '../../../theme/typography';
+
+interface SliderDisplayValueProps {
+  value: number;
+  hasLabels: boolean;
+  isInteracted: boolean;
+}
+
+function SliderDisplayValue(props: SliderDisplayValueProps) {
+  const { value, hasLabels, isInteracted } = props;
+
+  const valueToDisplay = isInteracted ? value : '-';
+
+  return (
+    <SliderDisplayBox hasLabels={hasLabels}>
+      <Typography textAlign="center" color="text.disabled" fontSize={pxToRem(9.5)}>
+        {valueToDisplay}
+      </Typography>
+    </SliderDisplayBox>
+  );
+}
+
+export default SliderDisplayValue;

package/src/components/FormComponents/SliderItem/SliderField.tsx

@@ -0,0 +1,88 @@
+/*
+ * Copyright 2023 Commonwealth Scientific and Industrial Research
+ * Organisation (CSIRO) ABN 41 687 119 230.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import React from 'react';
+import type { PropsWithIsTabledAttribute } from '../../../interfaces/renderProps.interface';
+import Slider from '@mui/material/Slider';
+import { getSliderMarks } from '../../../utils/slider';
+import Stack from '@mui/material/Stack';
+import SliderLabels from './SliderLabels';
+import SliderDisplayValue from './SliderDisplayValue';
+
+interface SliderFieldProps extends PropsWithIsTabledAttribute {
+  linkId: string;
+  value: number;
+  minValue: number;
+  minLabel: string;
+  maxValue: number;
+  maxLabel: string;
+  stepValue: number;
+  isInteracted: boolean;
+  readOnly: boolean;
+  onValueChange: (newValue: number) => void;
+}
+
+function SliderField(props: SliderFieldProps) {
+  const {
+    linkId,
+    value,
+    minValue,
+    maxValue,
+    stepValue,
+    minLabel,
+    maxLabel,
+    isInteracted,
+    readOnly,
+    isTabled,
+    onValueChange
+  } = props;
+
+  const sliderMarks = getSliderMarks(minValue, maxValue, minLabel, maxLabel, stepValue);
+
+  const sliderSx = {
+    maxWidth: !isTabled ? 280 : 3000,
+    minWidth: 160
+  };
+
+  const hasLabels = !!(minLabel || maxLabel);
+
+  return (
+    <Stack sx={{ ...sliderSx }}>
+      <SliderDisplayValue value={value} hasLabels={hasLabels} isInteracted={isInteracted} />
+      {hasLabels ? <SliderLabels minLabel={minLabel} maxLabel={maxLabel} /> : null}
+      <Slider
+        id={linkId}
+        value={value}
+        min={minValue}
+        max={maxValue}
+        step={stepValue}
+        marks={sliderMarks}
+        sx={{ ...sliderSx }}
+        onChange={(_, newValue) => {
+          if (typeof newValue === 'number') {
+            onValueChange(newValue);
+          }
+        }}
+        disabled={readOnly}
+        valueLabelDisplay="auto"
+        data-test="q-item-slider-field"
+      />
+    </Stack>
+  );
+}
+
+export default SliderField;

package/src/components/FormComponents/SliderItem/SliderItem.tsx

@@ -0,0 +1,115 @@
+/*
+ * Copyright 2023 Commonwealth Scientific and Industrial Research
+ * Organisation (CSIRO) ABN 41 687 119 230.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import React from 'react';
+import type {
+  PropsWithIsRepeatedAttribute,
+  PropsWithIsTabledAttribute,
+  PropsWithParentIsReadOnlyAttribute,
+  PropsWithQrItemChangeHandler
+} from '../../../interfaces/renderProps.interface';
+import type { QuestionnaireItem, QuestionnaireResponseItem } from 'fhir/r4';
+import useRenderingExtensions from '../../../hooks/useRenderingExtensions';
+import { createEmptyQrItem } from '../../../utils/qrItem';
+import { FullWidthFormComponentBox } from '../../Box.styles';
+import ItemFieldGrid from '../ItemParts/ItemFieldGrid';
+import useReadOnly from '../../../hooks/useReadOnly';
+import SliderField from './SliderField';
+import useSliderExtensions from '../../../hooks/useSliderExtensions';
+import Box from '@mui/material/Box';
+
+interface SliderItemProps
+  extends PropsWithQrItemChangeHandler,
+    PropsWithIsRepeatedAttribute,
+    PropsWithIsTabledAttribute,
+    PropsWithParentIsReadOnlyAttribute {
+  qItem: QuestionnaireItem;
+  qrItem: QuestionnaireResponseItem | null;
+}
+
+function SliderItem(props: SliderItemProps) {
+  const { qItem, qrItem, isRepeated, isTabled, parentIsReadOnly, onQrItemChange } = props;
+
+  const readOnly = useReadOnly(qItem, parentIsReadOnly);
+  const { displayInstructions } = useRenderingExtensions(qItem);
+  const { minValue, maxValue, stepValue, minLabel, maxLabel } = useSliderExtensions(qItem);
+
+  const isInteracted = !!qrItem?.answer;
+
+  // Init input value
+  let valueInteger = 0;
+  if (qrItem?.answer) {
+    if (qrItem?.answer[0].valueInteger) {
+      valueInteger = qrItem.answer[0].valueInteger;
+    }
+    if (qrItem?.answer[0].valueDecimal) {
+      valueInteger = Math.round(qrItem.answer[0].valueDecimal);
+    }
+  }
+
+  // Event handlers
+  function handleValueChange(newValue: number) {
+    onQrItemChange({
+      ...createEmptyQrItem(qItem),
+      answer: [{ valueInteger: newValue }]
+    });
+  }
+
+  if (isRepeated) {
+    return (
+      <Box px={4}>
+        <SliderField
+          linkId={qItem.linkId}
+          value={valueInteger}
+          minValue={minValue}
+          maxValue={maxValue}
+          stepValue={stepValue}
+          minLabel={minLabel}
+          maxLabel={maxLabel}
+          isInteracted={isInteracted}
+          readOnly={readOnly}
+          isTabled={isTabled}
+          onValueChange={handleValueChange}
+        />
+      </Box>
+    );
+  }
+
+  return (
+    <FullWidthFormComponentBox data-test="q-item-slider-box">
+      <ItemFieldGrid qItem={qItem} displayInstructions={displayInstructions} readOnly={readOnly}>
+        <Box px={4}>
+          <SliderField
+            linkId={qItem.linkId}
+            value={valueInteger}
+            minValue={minValue}
+            maxValue={maxValue}
+            stepValue={stepValue}
+            minLabel={minLabel}
+            maxLabel={maxLabel}
+            isInteracted={isInteracted}
+            readOnly={readOnly}
+            isTabled={isTabled}
+            onValueChange={handleValueChange}
+          />
+        </Box>
+      </ItemFieldGrid>
+    </FullWidthFormComponentBox>
+  );
+}
+
+export default SliderItem;

package/src/components/FormComponents/SliderItem/SliderLabels.tsx

@@ -0,0 +1,53 @@
+/*
+ * Copyright 2023 Commonwealth Scientific and Industrial Research
+ * Organisation (CSIRO) ABN 41 687 119 230.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import React from 'react';
+import Typography from '@mui/material/Typography';
+import { pxToRem } from '../../../theme/typography';
+import Box from '@mui/material/Box';
+
+interface SliderLabelsProps {
+  minLabel: string;
+  maxLabel: string;
+}
+
+function SliderLabels(props: SliderLabelsProps) {
+  const { minLabel, maxLabel } = props;
+
+  if (!minLabel && !maxLabel) {
+    return null;
+  }
+
+  return (
+    <Box display="flex" justifyContent="space-between" pb={0.5}>
+      {[minLabel, maxLabel].map((label, index) => (
+        <Typography
+          key={index}
+          textAlign="center"
+          fontSize={pxToRem(10)}
+          sx={{
+            transform: `translateX(${index === 0 ? '-50%' : '50%'})`,
+            wordWrap: 'break-word'
+          }}>
+          {label}
+        </Typography>
+      ))}
+    </Box>
+  );
+}
+
+export default SliderLabels;