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

Horizontal slider UI component for JavaScript.

Installation

yarn add @algolia/ui-components-horizontal-slider-js
# or
npm install @algolia/ui-components-horizontal-slider-js

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, you can call the horizontalSlider function and provide the container. It can be a CSS selector or an Element.

Standalone

import { horizontalSlider } from '@algolia/ui-components-horizontal-slider-js';

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

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

horizontalSlider({
  container: '#horizontal-slider',
  items,
  itemComponent({ item }) {
    return item.name;
  },
});

With Algolia Recommend

See usage for Recommend.

Props

container

string | HTMLElement

The container for the component. You can either pass a CSS selector or an Element. If there are several containers matching the selector, it picks up the first one.

When undefined, the function returns a JSX element for you to inject wherever you want.

items

RecordWithObjectID | required

type RecordWithObjectID<TItem> = TItem & {
  objectID: string;
};

The items to display in the component.

itemComponent

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

The item component to display.

translations

HorizontalSliderTranslations

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

The translations for the component.

classNames

HorizontalSliderClassnames

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 to window

The environment in which your application is running.

This is useful if you’re using the slider in a different context than window.