FR: Range slider

[jalal007]

What's the issue?

Hi, I'm developing a mobile site with AMP project. My project require a price range slider based data searching like the airbnb have, to see the airbnb Price Range slider, please Click here

I didn't find any Price range slider on AMP yet which will fulfill my need.

Could you please check the link i have attached and let me know your concern including how can i implement a price range slider on my project with AMP as like airbnb have.

[ericlindley-g]

Thanks @jalal007

@aghassemi , do you know how much effort this would be?

[aghassemi]

I am thinking this should be possible without a need for a dedicated component. Overlaying two <input type=range> elements and using amp-bind to change the min and max values of each as their values changes should accomplish this ( min and max may not be bindable at the moment but that's a super easy fix ).

[ericlindley-g]

Excellent! /cc @kul3r4 @sebastianbenz @fstanis for visibility w/r/t AMP by Example

[sebastianbenz]

@aghassemi I played around with this, but couldn't get it to work. The problem is that only one slider will receive touch events: https://codepen.io/anon/pen/PdKmZe

[aghassemi]

@sebastianbenz Found an example that uses pointer-events to fix that issue: see https://codepen.io/sakamies/pen/qOEGLJ
essentially it disables pointer-events on the input and re-enables it on the thumb only. Looks promising.

[sebastianbenz]

Ouh - that's clever! Wasn't even aware that you could target the thumb specifically. Works: https://codepen.io/anon/pen/NLvwyr ...this will make a nice sample!