@algolia/ui-components-js-horizontal-slider v1.0.0-experimental.0
@algolia/ui-components-js-horizontal-slider
Horizontal slider UI component for JavaScript.
Installation
yarn add @algolia/ui-components-js-horizontal-slider@experimental
# or
npm install @algolia/ui-components-js-horizontal-slider@experimental
Usage
To get started, you need a container for your slider to go in. If you don’t have one already, you can insert one into your markup:
<div id="horizontal-slider"></div>
Then, insert your slider into it by calling the horizontalSlider
function and providing the container
. It can be a CSS selector or an Element.
import { horizontalSlider } from '@algolia/ui-components-js-horizontal-slider';
import '@algolia/ui-components-js-horizontal-slider/HorizontalSlider.css';
const items = [
{ objectID: '1', name: 'Item 1' },
{ objectID: '2', name: 'Item 2' },
];
horizontalSlider({
container: '#horizontal-slider',
items,
itemComponent({ item }) {
return item.name;
},
});
Params
container
string | HTMLElement
| required
The container for the horizontal slider. You can either pass a CSS selector or an Element.
items
type RecordWithObjectID<TItem> = TItem & {
objectID: string;
};
The items to display in the component.
itemComponent
({ item }) => JSX.Element
| required
The item component to display.
translations
type HorizontalSliderTranslations = Partial<{
sliderLabel: string;
previousButtonLabel: string;
previousButtonTitle: string;
nextButtonLabel: string;
nextButtonTitle: string;
}>;
The translations for the component.
classNames
type HorizontalSliderClassnames = Partial<{
item: string;
list: string;
navigation: string;
navigationNext: string;
navigationPrevious: string;
root: string;
}>;
The class names for the component.
environment
typeof window
| defaults towindow
The environment in which your application is running.
This is useful if you’re using the slider in a different context than window.