useRangeSlider()

About this Hook

The useRangeSlider Hook isn’t currently available in React InstantSearch Hooks, but you can make it yourself using useConnector() along with connectRange.

Refer to the connectRange documentation for the full API reference.

See code examples

Examples

Copy

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
import { useConnector } from 'react-instantsearch-hooks-web';
import connectRange from 'instantsearch.js/es/connectors/range/connectRange';

export function useRangeSlider(props) {
  return useConnector(connectRange, props);
}

export function RangeSlider(props) {
  const {
    start,
    range,
    canRefine,
    refine,
    sendEvent,
  } = useRangeSlider(props);

  return <>{/* Your JSX */}</>;
}

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
import { useConnector } from 'react-instantsearch-hooks-web';
import connectRange from 'instantsearch.js/es/connectors/range/connectRange';

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

export type UseRangeSliderProps = RangeConnectorParams;

export function useRangeSlider(props?: UseRangeSliderProps) {
  return useConnector<RangeConnectorParams, RangeWidgetDescription>(
    connectRange,
    props
  );
}

export function RangeSlider(props: UseRangeSliderProps) {
  const {
    start,
    range,
    canRefine,
    refine,
    sendEvent,
  } = useRangeSlider(props);

  return <>{/* Your JSX */}</>;
}

Did you find this page helpful?

useRangeSlider()

About this Hook

Examples

On this page