使用Polymer Paper-Slider创建具有两个值的范围

Question

我想用Polymer Paper-Slider创建一个系列.用户可以移动Min和Max Pin的范围,它有两个输出,而不仅仅是一个.例如,我可以用来过滤电子商务网站上的选择的最低和最高价格.

希望有人能提供帮助.

谢谢

Answer 1

我一直在寻找这个,并找到了这个组件http://ewgenius.github.io/paper-interval-slider/components/paper-interval-slider/

几乎完美的工作.

Answer 2

我在上面的评论的基础上，使用两个滑块来表示最小/最大范围。

由于左侧滑块上的 CSS 黑客攻击，它看起来不错，但是由于使用两个滑块并调整两个滑块的最小/最大，因此行为很尴尬。

这是我到目前为止所得到的，以防对其他人有用。

（示例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>