src/components/form/slider-field.tsx

import { ComponentProps } from "react";

import { Slider } from "@/components/ui/slider";
import { Label } from "@/components/ui/label";
import { cn } from "@/lib/utils";

export function SliderField({
  label,
  className = "",
  labelClassName = "",
  sliderClassName = "",
  ...props
}: ComponentProps<typeof Slider> & {
  label?: string;
  className?: string;
  labelClassName?: string;
  sliderClassName?: string;
}) {
  return (
    <div className={cn(
      `flex flex-row space-x-2 items-center`,
      className
      )}>
      {label && <Label className={cn("text-xs text-zinc-400 w-1/3", labelClassName)}>{label}</Label>}
      <Slider {...props} className={sliderClassName} />
    </div>
  )
}