Price Filter Component

Overview

Build a price range filter component for an e-commerce application that allows users to select a minimum and maximum price range using an interactive slider interface.

Dependencies { .dependencies }

vant { .dependency }

Provides mobile UI components including range selection controls.

Requirements

Functional Requirements

1. Create a Vue 3 component that displays a price range selector
2. The component should show the current selected price range (both minimum and maximum values) in a clear, readable format
3. Allow users to interactively adjust both the minimum and maximum price values
4. The price range should span from $0 to $1000
5. The adjustment should happen in increments of $10
6. Display visual marks at $0, $250, $500, $750, and $1000 to help users orient themselves
7. When the user adjusts the range, emit an event with the selected minimum and maximum values

Component Interface

Props:

• initialMin (Number, default: 0): The initial minimum price value
• initialMax (Number, default: 1000): The initial maximum price value

Events:

• change: Emitted when the range changes, providing an object with min and max properties

Implementation Notes

• Ensure the component is styled appropriately for mobile devices
• The price values should be formatted with a dollar sign (e.g., "$250")
• The component should be reactive to prop changes

Test Cases

Test 1: Basic Range Selection { .test }

File: price-filter.test.ts

Description: Verify that the component renders with default values and allows range adjustment.

Test Steps:

1. Mount the component with default props
2. Verify the component displays the initial range ($0 - $1000)
3. Simulate adjusting the range to $100 - $800
4. Verify the change event is emitted with correct values

Expected Result:

• Component renders successfully
• Change event emits { min: 100, max: 800 }

Test 2: Custom Initial Values { .test }

File: price-filter.test.ts

Description: Verify that the component respects custom initial values.

Test Steps:

1. Mount the component with initialMin: 200 and initialMax: 600
2. Verify the component displays the range as $200 - $600

Expected Result:

• Component displays the custom initial range correctly

Test 3: Range Marks Display { .test }

File: price-filter.test.ts

Description: Verify that price marks are visible at key intervals.

Test Steps:

1. Mount the component with default props
2. Check that marks are displayed at $0, $250, $500, $750, and $1000

Expected Result:

• All five price marks are visible to guide the user