Custom slider to align between https://ui.shadcn.com/docs/components/slider and https://www.figma.com/design/Z7BRlfp6bzQS1Xst18iaj9/Slang-AI---Deliverables?node-id=2721-12974&t=kCe4wtAEKeUhak8k-0

slider.tsx

import * as React from "react"
import * as SliderPrimitive from "@radix-ui/react-slider"

import { cn } from '@utils/twUtils.ts';

const Slider = React.forwardRef<
  React.ElementRef<typeof SliderPrimitive.Root>,
  React.ComponentPropsWithoutRef<typeof SliderPrimitive.Root>
>(({ className, ...props }, ref) => {
  const guides = ["", "low", "med", "high", ""]; // Define your steps here
  const steps = ["", "15", "1 hour", "3 hour"]; // Define your steps here

  return (
    <div className="tw-relative tw-w-full">
      <div className="tw-flex tw-justify-between tw-mt-2">
        {guides.map((guide) => (
          <span key={guide} className="tw-text-2xl tw-text-purple-700">
            {guide}
          </span>
        ))}
      </div>
      <SliderPrimitive.Root
        ref={ref}
        className={cn(
          "tw-relative tw-flex tw-w-full tw-touch-none tw-select-none tw-items-center",
          className
        )}
        {...props}
      >
        <SliderPrimitive.Track
          className="tw-relative tw-h-2 tw-w-full tw-grow tw-overflow-hidden tw-rounded-full tw-bg-purple-200">
          <SliderPrimitive.Range className="tw-absolute tw-h-full tw-bg-purple-500"/>
        </SliderPrimitive.Track>
        <SliderPrimitive.Thumb
          className="tw-block tw-h-6 tw-w-6 tw-rounded-full tw-border tw-border-purple-500 tw-bg-purple-700 tw-shadow tw-transition-colors focus-visible:tw-outline-none focus-visible:tw-ring-1 focus-visible:tw-ring-purple-500 disabled:tw-pointer-events-none disabled:tw-opacity-50"/>
      </SliderPrimitive.Root>
      <div className="tw-flex tw-justify-between tw-mt-2">
        {steps.map((step) => (
          <span key={step} className="tw-text-2xl tw-text-purple-700">
            {step}
          </span>
        ))}
      </div>
    </div>
  );
});
Slider.displayName = SliderPrimitive.Root.displayName

export {Slider}