API Reference / Angular InstantSearch Widgets / ais-range-input
Apr. 24, 2019

ais-range-input

You are reading the documentation for Angular InstantSearch v3, which is in beta. You can find the v2 documentation here.

Widget signature 
<ais-range-input
  attribute="string"

  // Optional parameters
  [min]="number"
  [max]="number"
  [precision]="number"
  currency="string"
  separator="string"
  submitLabel="string"
></ais-range-input>
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 #

Edit
Copy 
1

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

Props #

attribute #
type: string
Required

The name of the attribute in the record.
Edit
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.
Edit
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.
Edit
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.
Edit
Copy 
1
2
3
4

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

Label for the currency sign.
Edit
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.
Edit
Copy 
1
2
3
4

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

Label of the submit button.
Edit
Copy 
1
2
3
4

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

Customize the UI - connectRange#

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

This connector is also used to build other widgets: RangeSlider

See code examples

1. Extend the BaseWidget class#

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

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

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

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

There are a couple of things happening in this boilerplate:

  • we create a RangeInput class extending BaseWidget
  • we reference the <ais-instantsearch> parent component instance on the RangeInput widget class
  • we 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 BaseWidget 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

import { Component, Inject, forwardRef } from '@angular/core';
import { BaseWidget, NgAisInstantSearch } from 'angular-instantsearch';
import { connectRange } from 'instantsearch.js/es/connectors';

@Component({
  selector: 'app-range-input',
  template: '<p>It works!</p>'
})
export class RangeInput extends BaseWidget {
  public state: {
    // render options
  };
  constructor(
    @Inject(forwardRef(() => NgAisInstantSearch))
    public instantSearchParent
  ) {
    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: {
  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 #

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 #

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

import { Component, Inject, forwardRef } from '@angular/core';
import { BaseWidget, NgAisInstantSearch } from 'angular-instantsearch';
import { connectRange } from 'instantsearch.js/es/connectors';

@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 BaseWidget {
  public state: {
     start: number[];
     range: object;
     refine: Function;
     widgetParams: object;
  };
  constructor(
    @Inject(forwardRef(() => NgAisInstantSearch))
    public instantSearchParent
  ) {
    super('RangeInput');
  }
  ngOnInit() {
    this.createWidget(connectRange, {
      // instance options
      attribute: 'price',
    });
    super.ngOnInit();
  }
}

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>

Did you find this page helpful?

Angular InstantSearch v3