Price Range Slider

You need to build a reusable and interactive Price Range Slider component in React.

The slider allows users to select a minimum and maximum price range using both range sliders and text inputs. The slider should be interactive, accessible, and responsive, with a smooth UI.

The following features must be implemented:

Two range sliders:

• One controls the minimum price.
• One controls the maximum price.

Two number input fields:

• Editable values for min and max.

Real-time labels above the slider track:

• Display the current selected min and max values (formatted with currency symbol ₹).

A filled track section between min and max values:

• Updates dynamically when sliders or inputs change.

Validation rules:

• The min value cannot be greater than the max.
• The max value cannot be less than the min.

Independent control:

• Both sliders should be draggable independently without breaking constraints.

User interaction support:

• Works with both mouse drag and keyboard arrows for accessibility.

Modern UI styling:

• Custom styled slider thumbs.
• Smooth movement and transitions.
• Labels positioned near sliders.

Constants

• Minimum allowed value (MIN): 0
• Maximum allowed value (MAX): 10000
• Step size (STEP): 100

Initial Values:

• Initial minimum price: 2000
• Initial maximum price: 8000

Data Test IDs

For testing purposes, use these data-testid attributes:

• slider-min → The minimum price slider
• slider-max → The maximum price slider
• input-min → The minimum price input
• input-max → The maximum price input
• label-min → The display label for min price
• label-max → The display label for max price
• slider-track-fill → The active filled track section

Functional Requirements

• Users can drag sliders or type values in inputs.
• Changing sliders updates input fields and labels immediately.
• Changing input fields updates sliders and track fill immediately.
• The track fill visually highlights the selected price range.
• Validation prevents invalid states (min > max or max < min).

Test Cases

• Min slider updates value and never exceeds max.
• Max slider updates value and never goes below min.
• Inputs reflect slider changes correctly.
• Inputs directly update slider positions.
• Track fill adjusts correctly on both input and slider change.
• Edge cases handled gracefully (e.g., entering invalid values).