Instantsearch.js: rangeSlider upgrade

Created on 10 Jun 2016  ·  13Comments  ·  Source: algolia/instantsearch.js

Given user feedback on our first rangeSlider:

  • it should be possible to have a single handle (= no range)
  • it should be possible to have min/max inputs to change
  • we should document all the options, some of the noUiSlider option are not documented
  • we should rename rangeSlider to slider
  • we should be able to display the min and max values in different containers than the tooltips (#826)
  • hide the tooltip when it's equal to upper/lower bound (#785)
  • we should be able to programmatically set the ranges
  • expose rtl option
  • we should be able to have non linear sliders see #1035
Needs Investigation

Most helpful comment

Would love to see non-linear sliding implemented as soon as possible

All 13 comments

Would love to see non-linear sliding implemented as soon as possible

Would love to be able to manipulate the tooltips when they're equal to their upper/lower bounds. Especially the upper one so I could display it like "€ 70 000+" or something.

@kaskajp thanks. are you proposing a new feature on top of the issue detail or backing an existing item?

Can you detail a bit more your comment so we can see if it fits an upgrade or not

  • hide the tooltip when it's equal to upper/lower bound

Instead of just being able to hide, I'd like to be able to change the contents of the tooltip. So I could manipulate them sort of like in the examples below.

screen shot 2017-01-04 at 11 29 04
screen shot 2017-01-04 at 11 29 26
screen shot 2017-01-04 at 11 30 14

That maybe you can already do it, try:

tooltips: {
  format: function() {
    // console.log(arguments);
  }
}

Oh yeah, you're right. Thanks! Apart from that I'd definitely like to back:

  • it should be possible to have min/max inputs to change

Connectors offers a complete control on the underlying component / rendering making all the features possible without cluttering the API with options that are rare. However we can consider options one by one to be added if they are really common (please open a new issue if so 🙏 )

it should be possible to have min/max inputs to change

In v2, we have a widget for that™️. @kaskajp

Whatever happened to the first idea; having a single slider?

I'm looking for a way to have a slider where the min is fixed to 0, and only the max can be adjusted.

Hi @jasperkennis :) We provide connectors for such a case. In the connectRange you will be able to refine a range and build your own UI. We do not provide a widget with a single handle as we thought it was too much of an edge case at the time, but we're always listening to new feedback :)

Thanks, if I build one I'll make sure to share it with you.

Thanks @jasperkennis that would be awesome :) Don't forget to post it to the forum too https://discourse.algolia.com/

@bobylito here's my crude version, this is sufficient for my needs so I probably won't update on it soon, it has some dependencies that others might find undesirable.

https://gist.github.com/jasperkennis/5fdbfc041ca65f58a4abac2468925eb8

Was this page helpful?
0 / 5 - 0 ratings