Price Adjuster Component

Build a React component for adjusting product prices with mouse wheel interaction support.

Requirements

Create a component that allows users to adjust prices using various input methods including mouse wheel scrolling with modifier support.

Core Functionality

• The component should display a numeric input for price values
• Price values must be in dollars with 2 decimal places (e.g., $19.99)
• Support a minimum price of $0.01 and maximum price of $999.99
• Default step increment should be $0.50
• The component should allow price changes through mouse wheel scrolling when the input is focused

Mouse Wheel Behavior

• Mouse wheel scrolling should change the price value when the input field is focused
• Scrolling up should increase the price
• Scrolling down should decrease the price
• When the Shift key is held while scrolling, the step amount should be multiplied by 10 (i.e., $5.00 instead of $0.50)
• Price changes should respect the minimum and maximum bounds

Display Requirements

• Display the formatted price with dollar sign and comma separators for thousands (e.g., $1,234.56)
• The dollar sign and formatting should be visible in the input field
• When typing, users should be able to enter numeric values which will be formatted appropriately

Implementation

@generates

API

import React from 'react';

export interface PriceAdjusterProps {
  value?: number;
  onChange?: (value: number | null) => void;
  defaultValue?: number;
}

export const PriceAdjuster: React.FC<PriceAdjusterProps>;

Test Cases

• When the user scrolls the mouse wheel up while focused on the input, the price increases by $0.50 @test
• When the user holds Shift and scrolls the mouse wheel up, the price increases by $5.00 @test
• When the price is at the maximum value, scrolling up has no effect @test
• The component formats the displayed price with dollar sign and thousand separators @test

Dependencies { .dependencies }

@rc-component/input-number { .dependency }

Provides numeric input component with mouse wheel support and step controls.

React { .dependency }

React library for building user interfaces.