search

algolia / vue-instantsearch

👀 Algolia components for building search UIs with Vue.js
https://www.algolia.com/doc/guides/building-search-ui/what-is-instantsearch/vue
MIT License
852 stars 157 forks source link

Add range slider as a facet component #412

Closed jryd closed 6 years ago

jryd commented 6 years ago

Do you want to request a feature or report a bug?

Feature

Feature: What is your use case for such a feature? This is a feature supported in the vanilla InstantSearch library; https://community.algolia.com/instantsearch.js/v2/widgets/rangeSlider.html. I'm in the process of converting this all to be based of vue-instantsearch given my app uses Vue on the frontend. This is a nice feature that is missing in the current library and would either suit a standalone component or as an extension of the Range Input component.

Feature: What is your proposed API entry? The new option to add? What is the behavior? I see two options:

  1. Add this as it's own component and call it like:
<ais-range-slider-input :min="" :max="" attribute-name="" ...></ais-range-slider-input>
  1. Add it as an extension of the current ais-range-input component, something like
<ais-range-input attribute-name="" :slider="true"></ais-range-input>

What is the version you are using? Always use the latest one before opening a bug issue. vue-instantsearch@1.5.2

Haroenv commented 6 years ago

As you noted, a range component is quite hard to build yourself is not that easy. For that reason we also plan to port this component from InstantSearch.js in the coming release. thanks for your patience!

seSze commented 6 years ago

Any update on this?

Haroenv commented 6 years ago

The next version will be ready for a beta in a few weeks

Haroenv commented 6 years ago

Code how to use this in v2 (alpha):

https://github.com/algolia/vue-instantsearch/blob/95a5cdba17b05d77206d66ca0f420dd6e97395c8/stories/RangeInput.stories.js#L74-L132

demo and other demo