instantsearch-rheostat-range-slider-react v0.0.2

RheostatRangeSlider Widget

🎥 See it Live on CodeSandbox

Demo

Description

This is the RheostatRangeSlider Labs widget for React InstantSearch. You can use this widget to refine results using numerical range with Algolia.

This helps the user quickly quickly refine results using a numerical range. This is a great widget to refine by price, number of person...

Table of Contents

• Get the code
  • JavaScript
  • CSS
• Usage
  • Requirements
• API
  • relevanceWidget(opts)
• Examples
• Implementation details
• Contributing

Get the code

This widget comes with JavaScript but also pre-defined CSS.

JavaScript

You can copy and paste the JavaScript code from the repository itself, grab it in the src/lib folder and use the <RheostatRangeSlider /> component.

CSS

You can copy and paste the necessary CSS code from the repository itself, grab it in src/lib/RheostatRangeSlider.css.

Usage

Install it with yarn add instantsearch-rheostat-range-slider-react then, use it as simply as:

import { InstantSearch, Panel } from 'react-instantsearch-dom';
import RheostatRangeSlider from 'instantsearch-rheostat-range-slider-react';

<InstantSearch
    appId="..."
    apiKey="..."
    indexName="..."
>
    <Panel header="...">
        <RheostatRangeSlider
            attribute="..."
        />
    </Panel>
</InstantSearch>

Requirements

You should encapsulate the <RheostatRangeSlider/> component inside a <Panel/> and in an <InstantSearch/> one.

Props

Implementation details

This widget is implemented using the connectRange() connector. To learn more about connectors, you can read the associated guide.

Contributing

To contribute to the project, clone this repository then run:

yarn
yarn start