dmenu-admin/src/pages/settings/components/DesignSlider.tsx

import { type FC } from "react";

type Props = {
  label: string;
  value: number;
  onChange: (value: number) => void;
};

const DesignSlider: FC<Props> = ({ label, value, onChange }) => {
  return (
    <div className="mb-5 last:mb-0">
      <div className="text-sm mb-3">{label}</div>
      <div className="relative pt-1 pb-5">
        <div className="relative h-1">
          <div className="absolute inset-0 top-1/2 -translate-y-1/2 h-px bg-border" />
          <div
            className="absolute top-1/2 -translate-y-1/2 right-0 bg-black"
            style={{
              width: `${value}%`,
              height: value > 0 ? 2 : 1,
            }}
          />
          <input
            type="range"
            min={0}
            max={100}
            value={value}
            onChange={(e) => onChange(Number(e.target.value))}
            dir="rtl"
            className="design-slider absolute inset-0 w-full h-full appearance-none bg-transparent cursor-pointer"
          />
        </div>
        <span className="absolute text-xs -bottom-2 -translate-x-1/2" style={{ right: `calc(${value}% - 10px)` }}>
          {value.toLocaleString("fa-IR")}%
        </span>
      </div>
    </div>
  );
};

export default DesignSlider;