Fluent Commerce Logo
Docs
Sign In

Integer Range Filter Component

UI Component

Changed on:

31 Dec 2024

Overview

The Integer Range Filter component allows users to filter data by specifying an integer range. It provides two input fields: a minimum value and a maximum value, where users can manually enter one or both values. Once the range is set, the filter displays only the data that falls within the selected range.

No alt text provided
Plugin NameCore

The standard library of mystique components. 

0000-00-00

v1.0.0

Initial changelog entry.

Alias

fc.field.intrange, intrange

Detailed technical description

The Integer Range Filter includes an input field that displays the current range as a formatted string. Clicking this input opens a popup containing the following elements:

  • Two Input Fields:
    • Allow users to enter the minimum (
      `from`
      ) and maximum (
      `to`
      ) range values.
  • Button Block:
    • Clear: Resets the input fields to empty values.
    • Cancel: Restores the initial values and closes the popup.
    • Apply: Confirms the selected range and closes the popup.

Properties

Name

Type

Required

Default Value

Description

value

`{ from?: number, to?: number }`

No

No

Specifies the integer range, supporting negative values.

In a workflow, the

`defaultValue`
property is used to define the initial range for the component's value.

Workflow Properties

Only the properties defined by the workflow contracts can be utilized when configuring the component within a workflow.

Name

Type

value

`{ from?: number, to?: number }`

name

`string`

label

`string`

type

`string`

source

`string`

options

`object`

defaultValue

`{ from?: number, to?: number }`

mandatory

`boolean`

Configuration example

1{
2    "userActions": [
3    {
4        "context": [
5            {
6                "label": "Range",
7                "type": "SECONDARY",
8                "modules": [
9                    "adminconsole"
10                ],
11                "confirm": true
12            }
13        ],
14        "attributes": [
15            {
16                "name": "intrange",
17                "label": "Range",
18                "type": "intrange",
19                "source": "",
20                "defaultValue": {
21                    "from": 1,
22                    "to": 2
23                },
24                "mandatory": false
25                }
26            ]
27        }
28    ]
29} 

Language: json

Version History

2025-01-08

v1.0.0

Initial release

Recommended Placement

The Integer Range Filter is best placed as part of a form or as a standalone filter for datasets.

Copyright © 2025 Fluent Retail Pty Ltd (trading as Fluent Commerce). All rights reserved. No materials on this docs.fluentcommerce.com site may be used in any way and/or for any purpose without prior written authorisation from Fluent Commerce. Current customers and partners shall use these materials strictly in accordance with the terms and conditions of their written agreements with Fluent Commerce or its affiliates.

Fluent Logo