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

Signature

<ais-range-slider
  attribute="string"

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

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

@NgModule({
  imports: [
    NgAisRangeSliderModule,
  ],
})
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-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

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

Props

attribute

The name of the attribute in the record.

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

min

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

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

max

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

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

precision

The number of digits after the decimal point to use.

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

pips

Show slider pips or not.

1
2
3
4
<ais-range-slider
  // ...
  [pips]="false"
></ais-range-slider>

tooltips

Show slider tooltips or not.

1
2
3
4
<ais-range-slider
  // ...
  [tooltips]="false"
></ais-range-slider>