components/range/index.tsx

import { Range as RangeBase, getTrackBackground } from "react-range";

export const Range = ({
  value,
  step = 1,
  min = 0,
  max = 100,
  onChange,
}: {
  value: number;
  step?: number;
  min?: number;
  max?: number;
  onChange: (e: number) => void;
}) => {
  return (
    <div className="w-full">
      <RangeBase
        step={step}
        min={min}
        max={max}
        values={[value]}
        onChange={([value]) => onChange(value)}
        renderTrack={({ props, children }) => (
          <div
            {...props}
            style={{
              ...props.style,
              height: "6px",
              width: "100%",
              borderRadius: 100,
              backgroundColor: "#4F545C",
              background: getTrackBackground({
                values: [value],
                colors: ["#5765F2", "#4F545C"],
                min: min,
                max: max,
              }),
            }}
          >
            {children}
          </div>
        )}
        renderThumb={({ props }) => (
          <div
            {...props}
            style={{
              ...props.style,
              height: 16,
              width: 6,
              borderRadius: 2,
              outline: "none",
              backgroundColor: "white",
            }}
          />
        )}
      />
    </div>
  );
};