Create option for disabling touch events on progress-bar subcomponent

[benknight]

Imagine we have a series of horizontal paper-slider on a touch screen like so:

---------------o------

-------------o--------

-------------------o--

-o--------------------

Scrolling down the page becomes very difficult as there are now four Danger Zones where the paper-slider inside the progress-bar will capture the drag event and adjust the slider value, but the user's intent was to scroll.

In order to provide a better user experience in these scenarios, it should be possible to enable gesture events only on the knob subcomponent and not the paper-progress.

I am happy to submit a PR, but first I'm looking for implementation direction here. It could be as simple as removing these lines from the element:

<paper-progress
  ...
  on-down="_bardown"
  on-up="_resetKnob"
  on-track="_onTrack">

And wrap that inside a dom-if template, however I'm not sure that's elegant as it would make for repeated code. Thoughts?

[benknight]

Update: the cleanest hack I've come up with this so far is adding this CSS rule:

paper-slider /deep/ #sliderBar { pointer-events: none; }

Still interested in a better long term solution though.

[blasten]

Definitely, this should be fixed. wdyt @frankiefu ?