NOTE FROM MAINTAINERS
This repository is no more maintained, you can fork it and maintain it if you want to. Thanks!
This JavaScript library embeds the awesome ion.rangeSlider as an instantsearch.js widget.
To use the ion.rangeSlider as a widget, do as follow:
- include the
ion.rangeSlidertheme, for instance theion.rangeSlider.cssandion.rangeSlider.skinFlat.cssstylesheets, - include the
ion.rangeSlider.min.jsJavaScript script, - include the
instantsearch-ion.rangeSlider.min.jsJavaScript script, - and instantiate the
instantsearch.widgets.ionRangeSliderwidget.
Note: If you don't specify the min/max values; you need to ensure your attributeName option is targeting a faceted attribute.
<!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',
attributeName: 'YourAttribute',
// if you want to specify 2 different attributes, use:
//
// attributeName: {
// lowerBound: 'YourLowerBoundAttribute',
// upperBound: 'YourLowerBoundAttribute'
//},
//
// if you want to force the min/max values, use:
// min: 0,
// max: 100,
//
// if you want to pass extra parameters to the underlying
// ionRangeSlider, you can use the following object:
// ionRangeSliderOptions: {
// prettify_enabled: false
//}
})
);
// [...]
search.start();
</script>
</body>
</html>To start developing, you can use the following commands:
$ npm install
$ npm run dev
$ open http://localhost:8888/test/playground.htmlLinting is done with eslint and Algolia's configuration and can be run with:
$ npm run lintUnit tests are written using Jasmine and ran with Karma. Integration tests are using Mocha and Saucelabs.
To run the unit tests suite run:
$ npm testTo 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- Ion.RangeSlider. An easy, flexible and responsive range slider with tons of options.