Creating a Range with two value with the Polymer Paper-Slider

Question

I would like to create a range with Polymer Paper-Slider. A range that the user can move the Min and Max Pin and it has two outputs and not just one. For instance a Min and Max price that I can use to filter choices on an e-commerce site.

Hope someone can help.

Thanks

Answer 1

I've been looking for this as well, and found this Component http://ewgenius.github.io/paper-interval-slider/components/paper-interval-slider/

Works almost perfectly.

Answer 2

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

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

This is what I got so far in case it's useful for somebody 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>