Range Fields

A paired min/max input component for numeric or date range values. Used by RenderFilterFields for range filter types (e.g., RANGE, DATE_RANGE).

Import


import { RangeFields } from "@phpcreation/frontend-components-react-nextjs-bundle/components/RangeFields";

Props

Prop	Type	Default	Description
`minValue`	`string \| number`	`""`	Minimum value
`maxValue`	`string \| number`	`""`	Maximum value
`onMinChange`	`(value: string) => void`	—	Min change handler
`onMaxChange`	`(value: string) => void`	—	Max change handler
`type`	`"number" \| "date"`	`"number"`	Input type
`minPlaceholder`	`string`	`"Min"`	Min input placeholder
`maxPlaceholder`	`string`	`"Max"`	Max input placeholder
`disabled`	`boolean`	`false`	Disable both inputs
`className`	`string`	—	Additional CSS classes

Usage


import { RangeFields } from "...";
 
<RangeFields
  type="number"
  minValue={minPrice}
  maxValue={maxPrice}
  onMinChange={setMinPrice}
  onMaxChange={setMaxPrice}
  minPlaceholder="Min price"
  maxPlaceholder="Max price"
/>

Date Range


<RangeFields
  type="date"
  minValue={startDate}
  maxValue={endDate}
  onMinChange={setStartDate}
  onMaxChange={setEndDate}
/>

In CRUD filter forms, RenderFilterFields automatically renders RangeFields for fields configured with range filter types. The priority field in generated entities uses a range filter by default.