0.1.0 • Published 9 years ago
instantsearch-ion.rangeslider v0.1.0
instantsearch-ion.rangeSlider
This JavaScript library embeds the awesome ion.rangeSlider as an instantsearch.js widget.
Table of Contents
Preview
Usage
To use the ion.rangeSlider
as a widget, do as follow:
- include the
ion.rangeSlider
theme, for instance theion.rangeSlider.css
andion.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.
0.1.0
9 years ago