Create a two-value range using the Polymer Paper-Slider

Question

I would like to create a range with Polymer Paper-Slider. The range in which the user can move the Min and Max Pin, and has two outputs, not one. For example, the price of Min and Max, which I can use to filter options on an e-commerce site.

Hope someone can help.

thanks

Answer 1

I searched this too and found this component http://ewgenius.imtqy.com/paper-interval-slider/components/paper-interval-slider/

It works almost perfectly.

Answer 2

I am based on the comments above using two sliders for the min / max range.

It looks good thanks to hacking css on the left slider, however, the behavior is inconvenient due to the work with two sliders and the min / max settings on both.

This is what I got so far if it is useful to someone else.

(sample http://jsfiddle.net/zLk6h91v/ )

<base href="//www.polymer-project.org/0.5/components/"> <link href="./paper-slider/paper-slider.html" rel="import"> <polymer-element name="xpm-range" attributes="rmin rmax vmin vmax onChangeRange"> <template > <style> paper-slider.min-slider::shadow #sliderKnobInner { background-color: #3f51b5; } paper-slider.min-slider::shadow #sliderContainer { width: calc(100% - 0px); } paper-slider.min-slider::shadow #sliderBar::shadow #activeProgress { background-color: #c8c8c8; } paper-slider.min-slider::shadow #sliderBar::shadow #secondaryProgress { background-color: #3f51b5; } paper-slider.min-slider::shadow #sliderBar::shadow #progressContainer { background-color: #3f51b5; } </style> <div layout horizontal > <span self-center>Min {{vmin}}</span> <paper-slider id="smin" flex pin min="{{rmin}}" max="{{vmax}}" value="{{vmin}}" on-change="{{onChange}}" class="min-slider"></paper-slider> <paper-slider id="smax" flex pin min="{{vmin}}" max="{{rmax}}" value="{{vmax}}" on-change="{{onChange}}"></paper-slider> <span self-center>Max {{vmax}}</span> </div> </template> <script> Polymer({ created: function() { this.rmin = 0; this.rmax = 100; }, onChange: function(e,d,s){ if (this.onChangeRange) window[this.onChangeRange](e,d,s); else console.log(this.vmin + " - " + this.vmax); // just while testing }, ready: function(){ this.vmin = this.rmin; this.vmax = this.rmax; }, }); </script> </polymer-element> <span><br>Choose the range</span> <xpm-range id="range1" style="width:100%" rmin="0" rmax="200" > </xpm-range>