🎉 Try the public beta of the new docs site at algolia.com/doc-beta! 🎉
UI libraries / Angular InstantSearch / Widgets

ais-range-input

Angular InstantSearch isn’t compatible with Angular’s Ivy view engine. We’re investigating how best to support this. For more information and to vote for Algolia’s support of Angular 16 and beyond, see the GitHub issue Algolia Support for Angular InstantSearch

Signature 
<ais-range-input
  attribute="string"

  // Optional parameters
  [min]="number"
  [max]="number"
  [precision]="number"
  currency="string"
  separator="string"
  submitLabel="string"
></ais-range-input>
Import
Copy 
1
2
3
4
5
6
7
8

import { NgAisRangeInputModule } from 'angular-instantsearch';

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

1. Follow additional steps in Optimize build size to ensure your code is correctly bundled.
2. This imports all the widgets, even the ones you don’t use. Read the Getting started guide for more information.

See code examples

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

Copy 
1

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

Props

Parameter Description
attribute
type: string
Required

The name of the attribute in the record.
Copy 
1

<ais-range-input attribute="price"></ais-range-input>
min
type: number
Optional

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

<ais-range-input
  // ...
  [min]="10"
></ais-range-input>
max
type: number
Optional

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

<ais-range-input
  // ...
  [max]="500"
></ais-range-input>
precision
type: number
default: 2
Optional

The number of digits after the decimal point to use.
Copy 
1
2
3
4

<ais-range-input
  // ...
  [precision]="0"
></ais-range-input>
currency
type: string
default: $
Optional

Label for the currency sign.
Copy 
1
2
3
4

<ais-range-input
  // ...
  currency="€"
></ais-range-input>
separator
type: string
default: to
Optional

Label for the separator between the inputs.
Copy 
1
2
3
4

<ais-range-input
  // ...
  separator="→"
></ais-range-input>
submitLabel
type: string
default: Go
Optional

Label of the submit button.
Copy 
1
2
3
4

<ais-range-input
  // ...
  submitLabel="Ok"
></ais-range-input>

HTML output

Copy 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

<div class="ais-RangeInput">
  <form class="ais-RangeInput-form">
    <label class="ais-RangeInput-label">
      <input
        class="ais-RangeInput-input ais-RangeInput-input--min"
        type="number"
        placeholder=""
        step="1"
      />
    </label>
    <span class="ais-RangeInput-separator">to</span>
    <label class="ais-RangeInput-label">
      <input
        class="ais-RangeInput-input ais-RangeInput-input--max"
        type="number"
        placeholder=""
        step="1"
      />
    </label>
    <button class="ais-RangeInput-submit" type="submit">Go</button>
  </form>
</div>

Customize the UI with connectRange

If you want to create your own UI of the ais-range-input widget, you can combine the connectRange connector with the TypedBaseWidget class.

This connector is also used to build other widgets: RangeSlider

See code examples

1. Extend the TypedBaseWidget class

First of all, you will need to write some boilerplate code to initialize correctly the TypedBaseWidget class. This happens in the constructor() of your class extending the TypedBaseWidget class.

Copy 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

import { Component, Inject, forwardRef, Optional } from '@angular/core';
import { TypedBaseWidget, NgAisInstantSearch, NgAisIndex } from 'angular-instantsearch';

@Component({
  selector: 'app-range-input',
  template: '<p>It works!</p>'
})
export class RangeInput extends TypedBaseWidget {
  constructor(
    @Inject(forwardRef(() => NgAisIndex))
    @Optional()
    public parentIndex: NgAisIndex,
    @Inject(forwardRef(() => NgAisInstantSearch))
    public instantSearchInstance: NgAisInstantSearch
  ) {
    super('RangeInput');
  }
}

There are a couple of things happening in this boilerplate:

  • create a RangeInput class extending TypedBaseWidget
  • reference the <ais-instantsearch> parent component instance on the RangeInput widget class
  • set app-range-input as a selector, so we can use our component as <app-range-input></app-range-input>

2. Connect your custom widget

The TypedBaseWidget class has a method called createWidget() which takes two arguments: the connector to use and an object of options (instance options) for this connector. We call this method at ngOnInit. This component now implements OnInit.

Copy 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31

import { Component, Inject, forwardRef, Optional } from '@angular/core';
import { TypedBaseWidget, NgAisInstantSearch, NgAisIndex } from 'angular-instantsearch';

import connectRange, {
  RangeWidgetDescription,
  RangeConnectorParams
} from 'instantsearch.js/es/connectors/range/connectRange';

@Component({
  selector: 'app-range-input',
  template: '<p>It works!</p>'
})
export class RangeInput extends TypedBaseWidget<RangeWidgetDescription, RangeConnectorParams> {
  public state: RangeWidgetDescription['renderState']; // Rendering options
  constructor(
    @Inject(forwardRef(() => NgAisIndex))
    @Optional()
    public parentIndex: NgAisIndex,
    @Inject(forwardRef(() => NgAisInstantSearch))
    public instantSearchInstance: NgAisInstantSearch
  ) {
    super('RangeInput');
  }
  ngOnInit() {
    this.createWidget(connectRange, {
      // instance options
      attribute: 'price',
    });
    super.ngOnInit();
  }
}

3. Render from the state

Your component instance has access to a this.state property which holds the rendering options of the widget.

public state: RangeWidgetDescription['renderState'];
// {
//   start: number[];
//   range: object;
//   refine: Function;
//   widgetParams: object;
// }
Copy 
1
2
3
4
5
6
7

<div *ngIf="state.range">
  from
  <input type="number" #min [value]="state.start[0]" min="state.range.min" max="state.range.max" />
  to
  <input type="number" #max [value]="state.start[1]" min="state.range.min" max="state.range.max" />
  <button (click)="state.refine([min.value, max.value])">Go</button>
</div>

Rendering options

Parameter Description
start
type: number[]

The current value for the refinement, with start[0] as the minimum value and start[1] as the maximum value.
range
type: object

The current available value for the range.
refine
type: function

Sets a range to filter the results on. Both values are optional, and default to the higher and lower bounds. You can use undefined to remove a previously set bound or to set an infinite bound.
widgetParams
type: object

All original widget options forwarded to the render function.

Instance options

Parameter Description
attribute
type: string
Required

The name of the attribute in the record.
min
type: number
Optional

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

The maximum value for the input. When not provided, the maximum value is automatically computed by Algolia from the data in the index.
precision
type: number
default: 0
Optional

The number of digits after the decimal point to use.

Full example

Copy 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39

import { Component, Inject, forwardRef, Optional } from '@angular/core';
import { TypedBaseWidget, NgAisInstantSearch, NgAisIndex } from 'angular-instantsearch';

import connectRange, {
  RangeWidgetDescription,
  RangeConnectorParams
} from 'instantsearch.js/es/connectors/range/connectRange';

@Component({
  selector: 'app-range-input',
  template: `
<div *ngIf="state.range">
  from
  <input type="number" #min [value]="state.start[0]" min="state.range.min" max="state.range.max" />
  to
  <input type="number" #max [value]="state.start[1]" min="state.range.min" max="state.range.max" />
  <button (click)="state.refine([min.value, max.value])">Go</button>
</div>
`
})
export class RangeInput extends TypedBaseWidget<RangeWidgetDescription, RangeConnectorParams> {
  public state: RangeWidgetDescription['renderState']; // Rendering options
  constructor(
    @Inject(forwardRef(() => NgAisIndex))
    @Optional()
    public parentIndex: NgAisIndex,
    @Inject(forwardRef(() => NgAisInstantSearch))
    public instantSearchInstance: NgAisInstantSearch
  ) {
    super('RangeInput');
  }
  ngOnInit() {
    this.createWidget(connectRange, {
      // instance options
      attribute: 'price',
    });
    super.ngOnInit();
  }
}
Did you find this page helpful?
Angular InstantSearch v4