How to hide the average value for the V2 slider?

[mindbits]

trafficstars

Hi,

the new slider shows the average value in the middle.

Which is kind of odd, especially when the average is not a round number like in the example on https://community.algolia.com/instantsearch.js/v2/widgets/rangeSlider.html where the average is 2500.50 for the range of 1-5000. 2500.50 * 2 is 5001

Is there a way to hide the average values completey? Or at least an option to have a template function against it that values can be rounded to sane values?

Thank you

[iam4x]

Hello,

Thanks for the feedback @mindbits. We have no option for this a the moment, but I think it's a reasonable use case to implement an option for it.

What do you think @bobylito @Haroenv ?

[Haroenv]

I was looking at the widget, and it makes sense to add some configuration about that. What are the options of Rheostat?

[iam4x]

There is already the tooltip option you can set at false to remove all the labels, the min, medium and max. (https://github.com/algolia/instantsearch.js/blob/bcdaa5b58c3c81110287669a71671d2a608259e1/src/components/Slider/Slider.js#L84-L88)

There is no easy way to disable only the medium right now.

[Haroenv]

As a workaround, you can do:

document.querySelectorAll(".ais-range-slider--value")[1].hidden = true

[mindbits]

Another problem I am having with the slider:

Eg the slider in the docs: How do you show only items that cost exactly $5,000?

It's not possible to have only 1 value. In the example the minimum range is $4,942 - $5,000. Which might not matter as the values are high but if you have a slider with a smaller range, eg hotel stars, it might make more sense that customers want to show only 1 value.

This was easily doable with the old slider.

Is there an easy way to use the old slider instead of the new one?

[Haroenv]

For stars you can use the starRating widget, which isn't a slider, but works perfectly for it

[mindbits]

I know, this was just an example. But I am sure that there are many use cases where a min/max range slider should be able to return only 1 value?

[Haroenv]

Do you mean only integer values?

[mindbits]

Not integer values but single values.

With the old range slider you could select a range of $5,000 - $5,000 , so just show everything costing $5,000.

https://community.algolia.com/instantsearch.js/documentation/#rangeslider

With the new range slider, this is not possible.

Eg if you have bra sizes from 30A to 52J, it is not possible to drill the search down to bras with a size of 32C. It is only possible to show a range of eg 32B and 32C sized bras. Whereas I am not even sure if the range would be broader with the new slider.

https://community.algolia.com/instantsearch.js/v2/widgets/rangeSlider.html

The $1-$5,000 example has a minimum range of $4,942 - $5,000, not possible to show only the items costing $5,000

Also, the value of the dragged knob seems to have a lower z-index, you are never really sure about the current range the closer you get to the end.

The old slider had a higher z-index for the dragged knob which made life a lot easier showing the current range much more readable.

[iam4x]

Thank you for the good feedback @mindbits we will look into these issues and sync with the team on how and when to solve to them 👍

[ljharb]

(Feel free to continue filing issues and feature request on rheostat as well)

[dhayab]

Closing this issue.

For the latest version of InstantSearch.js, hiding the average with CSS still works, and it seems impossible to set the min/max values to the same value with Rheostat. Feel free to reopen if necessary.