API Reference / Angular InstantSearch / ais-range-slider

ais-range-slider

A
Signature 
<ais-range-slider
  attribute="string"

  // Optional parameters
  [min]="number"
  [max]="number"
  [precision]="number"
  [pips]="boolean"
  [tooltips]="boolean"
></ais-range-slider>
See code examples

About this widget # A

The ais-range-slider allows a user to select a numeric range using a third party slider (noUiSlider in that case).

Requirements#

The attribute provided to the widget must be present in “attributes for faceting” on the Algolia dashboard or configured as attributesForFaceting via setSettings. The values inside the attribute must be numbers, not strings.

You need to import the external CSS by yourself to make the range slider work. The CSS file is available at:

  • https://cdnjs.cloudflare.com/ajax/libs/noUiSlider/10.1.0/nouislider.min.css (CDN)
  • node_modules/nouislider/distribute/nouislider.min.css (local)

Examples # A

Copy 
1

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

Props # A

attribute #
type: string
Required

The name of the attribute in the record.
Copy 
1

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

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

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

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

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

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

<ais-range-slider
  // ...
  [precision]="0"
></ais-range-slider>
pips #
type: boolean
default: true
Optional

Show slider pips or not.
Copy 
1
2
3
4

<ais-range-slider
  // ...
  [pips]="false"
></ais-range-slider>
tooltips #
type: boolean
default: true
Optional

Show slider tooltips or not.
Copy 
1
2
3
4

<ais-range-slider
  // ...
  [tooltips]="false"
></ais-range-slider>

HTML output# A

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

<div class="ais-RangeSlider">
  <div class="rheostat rheostat-horizontal" style="position: relative;">
    <div class="rheostat-background"></div>
    <div class="rheostat-handle rehostat-handle--lower" aria-valuemax="5000" aria-valuemin="1" aria-valuenow="750" aria-disabled="false" data-handle-key="0" role="slider" tabindex="0" style="left: 15%; position: absolute;">
      <div class="rheostat-tooltip">$750</div>
    </div>
    <div class="rheostat-handle rheostat-handle--upper" aria-valuemax="5000" aria-valuemin="750" aria-valuenow="5000" aria-disabled="false" data-handle-key="1" role="slider" tabindex="0" style="left: 100%; position: absolute;">
      <div class="rheostat-tooltip">$5,000</div>
    </div>
    <div class="rheostat-progress" style="left: 15%; width: 85%;"></div>
    <div class="rheostat-marker rheostat-marker--large" style="left: 0%; position: absolute; margin-left: 0px;">
      <div class="rheostat-value">1</div>
    </div>
    <div class="rheostat-marker" style="left: 2.94118%; position: absolute; margin-left: 0px;"></div>
    <!-- ... -->
    <div class="rheostat-marker" style="left: 97.0588%; position: absolute; margin-left: 0px;"></div>
    <div class="rheostat-marker rheostat-marker--large" style="left: 100%; position: absolute; margin-left: -1px;">
      <div class="rheostat-value">5,000</div>
    </div>
  </div>
</div>

Customize the UI with connectRange# A

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

This connector is also used to build other widgets: RangeInput

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-slider',
  template: '<p>It works!</p>'
})
export class RangeSlider extends TypedBaseWidget {
  constructor(
    @Inject(forwardRef(() => NgAisIndex))
    @Optional()
    public parentIndex: NgAisIndex,
    @Inject(forwardRef(() => NgAisInstantSearch))
    public instantSearchInstance: NgAisInstantSearch
  ) {
    super('RangeSlider');
  }
}

There are a couple of things happening in this boilerplate:

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

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-slider',
  template: '<p>It works!</p>'
})
export class RangeSlider 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('RangeSlider');
  }
  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
8
9
10

<div *ngIf="state.range">
  <input
    type="range"
    #input
    [min]="state.range.min"
    [max]="state.range.max"
    (change)="state.refine([state.range.min, input.value])"
  />
  {{input.value}}
</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
38
39
40
41
42

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-slider',
  template: `
<div *ngIf="state.range">
  <input
    type="range"
    #input
    [min]="state.range.min"
    [max]="state.range.max"
    (change)="state.refine([state.range.min, input.value])"
  />
  {{input.value}}
</div>
`
})
export class RangeSlider 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('RangeSlider');
  }
  ngOnInit() {
    this.createWidget(connectRange, {
      // instance options
      attribute: 'price',
    });
    super.ngOnInit();
  }
}
Did you find this page helpful?
Angular InstantSearch v4