ais-range-slider
You are reading the documentation for Angular InstantSearch v3, which is in beta. You can find the v2 documentation here.
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
|
type: string
Required
The name of the attribute in the record. |
||
|
Copy
|
|||
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
|
|||
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
|
|||
precision
|
type: number
default: 2
Optional
The number of digits after the decimal point to use. |
||
|
Copy
|
|||
pips
|
type: boolean
default: true
Optional
Show slider pips or not. |
||
|
Copy
|
|||
tooltips
|
type: boolean
default: true
Optional
Show slider tooltips or not. |
||
|
Copy
|
|||
Customize the UI - connectRange
If you want to create your own UI of the ais-range-slider widget, you can combine the connectRange connector with the BaseWidget class.
This connector is also used to build other widgets: RangeInput
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.
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-slider',
template: '<p>It works!</p>'
})
export class RangeSlider extends BaseWidget {
constructor(
@Inject(forwardRef(() => NgAisInstantSearch))
public instantSearchParent
) {
super('RangeSlider');
}
}
There are a couple of things happening in this boilerplate:
- we create a
RangeSliderclass extendingBaseWidget - we reference the
<ais-instantsearch>parent component instance on theRangeSliderwidget class - we set
app-range-slideras a selector, so we can use our component as<app-range-slider></app-range-slider>
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.
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-slider',
template: '<p>It works!</p>'
})
export class RangeSlider extends BaseWidget {
public state: {
// render options
};
constructor(
@Inject(forwardRef(() => NgAisInstantSearch))
public instantSearchParent
) {
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: {
start: number[];
range: object;
refine: Function;
widgetParams: object;
}
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 |
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 |
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
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
import { Component, Inject, forwardRef } from '@angular/core';
import { BaseWidget, NgAisInstantSearch } from 'angular-instantsearch';
import { connectRange } from 'instantsearch.js/es/connectors';
@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 BaseWidget {
public state: {
start: number[];
range: object;
refine: Function;
widgetParams: object;
};
constructor(
@Inject(forwardRef(() => NgAisInstantSearch))
public instantSearchParent
) {
super('RangeSlider');
}
ngOnInit() {
this.createWidget(connectRange, {
// instance options
attribute: 'price',
});
super.ngOnInit();
}
}
HTML output
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>
