Ais-Range-Input | Angular InstantSearch V4 (Deprecated)

Signature

<ais-range-input
  attribute="string"

  // Optional parameters
  [min]="number"
  [max]="number"
  [precision]="number"
  currency="string"
  separator="string"
  submitLabel="string"
></ais-range-input>

1
2
3
4
5
6
7
8
import { NgAisRangeInputModule } from 'angular-instantsearch';

@NgModule({
  imports: [
    NgAisRangeInputModule,
  ],
})
export class AppModule {}

1
2
3
4
5
6
7
8
import { NgAisModule } from 'angular-instantsearch';

@NgModule({
  imports: [
    NgAisModule.forRoot(),
  ],
})
export class AppModule {}

About this widget

The ais-range-input allows a user to select a numeric range using a minimum and maximum input.

Requirements

The attributes passed to the attributes prop must be declared as Attributes for faceting on the Algolia dashboard) or configured as attributesForFaceting with the Algolia API.

Examples

1
<ais-range-input attribute="price"></ais-range-input>

Props

attribute

The name of the attribute in the record.

1
<ais-range-input attribute="price"></ais-range-input>

min

The minimum value for the input. When not provided, the minimum value is automatically computed by Algolia from the data in the index.

1
2
3
4
<ais-range-input
  // ...
  [min]="10"
></ais-range-input>

max

The maximum value for the input. When not provided, the maximum value is automatically computed by Algolia from the data in the index.

1
2
3
4
<ais-range-input
  // ...
  [max]="500"
></ais-range-input>

precision

The number of digits after the decimal point to use.

1
2
3
4
<ais-range-input
  // ...
  [precision]="0"
></ais-range-input>

currency

Label for the currency sign.

1
2
3
4
<ais-range-input
  // ...
  currency="€"
></ais-range-input>

separator

Label for the separator between the inputs.

1
2
3
4
<ais-range-input
  // ...
  separator="→"
></ais-range-input>

submitLabel

Label of the submit button.

1
2
3
4
<ais-range-input
  // ...
  submitLabel="Ok"
></ais-range-input>