@algolia/ui-components-horizontal-slider-react

Horizontal slider UI component for React.

Installation

``sh
yarn add @algolia/ui-components-horizontal-slider-react


or


npm install @algolia/ui-components-horizontal-slider-react
`

Usage

$3

`js
import { HorizontalSlider } from '@algolia/ui-components-horizontal-slider-react';

import '@algolia/ui-components-horizontal-slider-theme';

const items = [
{ objectID: '1', name: 'Item 1' },
{ objectID: '2', name: 'Item 2' },
];

function Item({ item }) {
return (


      {item.name}
    

);
}

function App() {
// ...

return ;
}
`

$3

See usage for Recommend.

Props

$3




RecordWithObjectID | required

`ts
type RecordWithObjectID = TItem & {
objectID: string;
};
`




The items to display in the component.

$3

> ({ item }) => JSX.Element | required

The item component to display.

$3




HorizontalSliderTranslations

`ts
type HorizontalSliderTranslations = Partial<{
sliderLabel: string;
previousButtonLabel: string;
previousButtonTitle: string;
nextButtonLabel: string;
nextButtonTitle: string;
}>;
`




The translations for the component.

$3




HorizontalSliderClassnames

`ts
type HorizontalSliderClassnames = Partial<{
item: string;
list: string;
navigation: string;
navigationNext: string;
navigationPrevious: string;
root: string;
}>;
``

The class names for the component.