[Instantsearch] Add range slider & use it for the price slider

[Jade-GG]

This PR adds a simple custom range slider for the price slider using plain html and css for the inputs, and a Vue component for handling the values. I've made sure that it works properly across the main browsers (Firefox, Chrome, Safari).

The Vue component has been made specifically to support the InstantSearch range input data, however it should be possible to use elsewhere, thus I turned it into its own input component. However, I don't think we want to make this into a rapidez/blade-components because the use of Vue is pretty abundant here.

[royduin]

Does it also play nice on a touch device?

[indykoning]

Considering we're using regular range sliders for this i'm assuming it's not a big problem, how is the accessibility for the range slider?

[Jade-GG]

Does it also play nice on a touch device?

As far as I'm able to test, yes. I have no problems using this input on mobile.

Because it's built on top of the default HTML range input I would also expect this to be the case. It would be pretty weird if a browser doesn't support default HTML inputs 🙂

FYI, the only reason I had to make sure it worked on every browser is the -moz-range-thumb and -webkit-slider-thumb thing. Every major browser aside from firefox implements the latter, and firefox implements the former.

[royduin]

Let's keep the inputs so a visitor can use both. If a shop doesn't want one; they can override the template and remove one of the options.