export type Props = {
  start: number;
  end: number;
  onStartChange?: (value: number) => void;
  onEndChange?: (value: number) => void;
};

export default (props: Props) => (
  <div class="flex gap-2">
    <input
      type="number"
      value={props.start}
      onInput={(event) => {
        const input = event.currentTarget as HTMLInputElement;
        props.onStartChange?.(input.valueAsNumber);
      }}
    />
    <input
      type="number"
      value={props.end}
      onInput={(event) => {
        const input = event.currentTarget as HTMLInputElement;
        props.onEndChange?.(input.valueAsNumber);
      }}
    />
  </div>
);