Function Slider

packages/docs/src/ui-system/Slider/Slider.tsx:13–33

({ className, min, max, step = 1, value, onChange })

};

export const Slider: FC<Props> = ({ className, min, max, step = 1, value, onChange }) => {
  const progress = ((value - min) / (max - min)) * 100;

  return (
    <input
      type="range"
      className={variants({ className })}
      min={min}
      max={max}
      step={step}
      value={value}
      onChange={(e) => onChange(Number(e.target.value))}
      style={
        {
          background: `linear-gradient(to right, var(--primary) ${progress}%, var(--muted) ${progress}%)`,
          '--progress': `${progress}%`,
        } as React.CSSProperties
      }
    />
  );
};