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>

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

2 个答案: