frontend/app/components/SliderInput.js

import { Slider } from "@mantine/core";
import Label from "./Label";

export const SlideInput = ({ label, fieldProps, ...props }) => {
  return (
    <div className="relative">
      {label && <Label>{label}</Label>}
      <Slider
        {...fieldProps}
        {...props}
        className="mb-5"
        labelTransitionProps={{
          transition: "fade",
          duration: 400,
          timingFunction: "ease",
        }}
      />
    </div>
  );
};

export default SlideInput;