This package has been deprecated

Author message:

this is no longer compatible with the latest versions of instantsearch

instantsearch-ion.rangeslider

0.1.0 • Public • Published

instantsearch-ion.rangeSlider

This JavaScript library embeds the awesome ion.rangeSlider as an instantsearch.js widget.

build status NPM version

Table of Contents

Preview

widget

Usage

To use the ion.rangeSlider as a widget, do as follow:

  • include the ion.rangeSlider theme, for instance the ion.rangeSlider.css and ion.rangeSlider.skinFlat.css stylesheets,
  • include the ion.rangeSlider.min.js JavaScript script,
  • include the instantsearch-ion.rangeSlider.min.js JavaScript script,
  • and instantiate the instantsearch.widgets.ionRangeSlider widget.
<!DOCTYPE html>
<html>
  <head>
    <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/ion.rangeslider/2.0.6/css/ion.rangeSlider.css">
    <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/ion.rangeslider/2.0.6/css/ion.rangeSlider.skinFlat.css">
  </head>
  <body>
    <div id="slider"></div>
    <!-- [...] -->
    <script src="https://cdn.jsdelivr.net/ion.rangeslider/2.0.6/js/ion.rangeSlider.min.js"></script> 
    <script src="instantsearch-ion.rangeSlider.min.js"></script> 
    <script>
      var search = instantsearch({
        appId: 'YourApplicationID',
        apiKey: 'YourSearchOnlyAPIKey',
        indexName: 'YourIndexName'
      });
      // [...]
      search.addWidget(
        instantsearch.widgets.ionRangeSlider({
          container: '#slider',
          facetName: 'YourAttribute'
        })
      );
      // [...]
      search.start();
    </script> 
  </body>
</html>

Development

To start developing, you can use the following commands:

$ npm install
$ npm run dev
$ open http://localhost:8888/test/playground.html

Linting is done with eslint and Algolia's configuration and can be run with:

$ npm run lint

Testing

Unit tests are written using Jasmine and ran with Karma. Integration tests are using Mocha and Saucelabs.

To run the unit tests suite run:

$ npm test

To run the integration tests suite run:

$ npm run build
$ npm run server
$ ngrok 8888
$ TEST_HOST=http://YOUR_NGROK_ID.ngrok.com SAUCE_ACCESS_KEY=YOUR_KEY SAUCE_USERNAME=YOUR_USERNAME./node_modules/mocha/bin/mocha --harmony -R spec ./test/integration/test.js

Credits

  • Ion.RangeSlider. An easy, flexible and responsive range slider with tons of options.

Package Sidebar

Install

npm i instantsearch-ion.rangeslider

Weekly Downloads

18

Version

0.1.0

License

MIT

Last publish

Collaborators

  • haroenv
  • speedblue
  • redox