扩展聚合物纸张滑块元素以使用枚举值列表

Question

我试图扩展聚合物纸张滑块元素以接受枚举的值列表。现在，无论滑块的宽度是多少，我都无法以一种有效的方式定位引脚文本。此示例对这些滑块的特定宽度的文本水平位置进行硬编码，以便您可以看到我想要完成的任务。关于如何以某种方式检索文本div和滑块的宽度以便我可以以编程方式分配位置的任何想法？如果您可以修复引脚上的不一致/不稳定转换，则可获得额外的功劳。

＆＃13;

＆＃13;

<script src="http://www.polymer-project.org/platform.js"></script>
<link rel="import" href="http://www.polymer-project.org/components/polymer/polymer.html">
<link href="http://www.polymer-project.org/components/paper-slider/paper-slider.html" rel="import">

<polymer-element name="rate-picker" extends="paper-slider" attributes="snaps pin disabled secondaryProgress editable immediateValue">
  <template>

    <link rel="stylesheet" href="http://www.polymer-project.org/components/paper-slider/paper-slider.css">
    <style>
      .pin > #sliderKnob > #sliderKnobInner::before {
        top: 12px;
        left: 4px;
        width: 16px;
        height: 16px;
      }
      
      #sliderKnobInner::before, #sliderKnobInner::after {
        transition: -webkit-transform .2s ease, background-color .18s ease;
        transition: transform .2s ease, background-color .18s ease;
        transition: -webkit-transform .2s ease, border .18s ease;
        transition: transform .2s ease, border .18s ease;
      }
      
      .pin > #sliderKnob > #sliderKnobInner::after {
        white-space: nowrap;
        width: auto;
        background: #3f51b5;
        border: 5px solid #3f51b5;
        border-radius: 5px;
        padding: 0 10px 0 10px;
        height: 12px;
        top: -3px;
        left: 0;
        line-height: 10px;
      }
    </style>

    <template if="{{!disabled}}">
      <core-a11y-keys target="{{}}" keys="left down pagedown home" on-keys-pressed="{{decrementKey}}"></core-a11y-keys>
      <core-a11y-keys target="{{}}" keys="right up pageup end" on-keys-pressed="{{incrementKey}}"></core-a11y-keys>
    </template>

    <div id="sliderContainer" class="{{ {disabled: disabled, pin: pin, snaps: snaps, ring: immediateValue <= min, expand: expand, dragging: dragging, transiting: transiting, editable: editable} | tokenList }}">

      <div class="bar-container">
        <paper-progress id="sliderBar" aria-hidden="true" min="{{min}}" max="{{max}}" value="{{immediateValue}}" secondaryProgress="{{secondaryProgress}}"
                        on-down="{{bardown}}" on-up="{{resetKnob}}"
                        on-trackstart="{{trackStart}}" on-trackx="{{trackx}}" on-trackend="{{trackEnd}}"></paper-progress>
      </div>

      <template if="{{snaps && !disabled}}">
        <div class="slider-markers" horizontal layout>
          <template repeat="{{markers}}">
            <div flex class="slider-marker"></div>
          </template>
        </div>
      </template>

      <div id="sliderKnob" on-down="{{expandKnob}}" on-up="{{resetKnob}}"
           on-trackstart="{{trackStart}}" on-trackx="{{trackx}}" on-trackend="{{trackEnd}}"
           on-transitionend="{{knobTransitionEnd}}"
           center-justified center horizontal layout>

        <div id="sliderKnobInner" value="{{enumValue}}"></div>

      </div>

    </div>

    <template if="{{editable}}">
      <paper-input id="input" class="slider-input" value="{{immediateValue}}" disabled?="{{disabled}}" on-change="{{inputChange}}"></paper-input>
    </template>
  </template>
  <script>
    Polymer('rate-picker', {
      ready: function () {
        this.disabled = false;
        this.snaps = true;
        this.pin = true;
        this.min = 0;
        this.max = 5;
        this.value = 0;
        this.enumValues = ["No rating", "Strongly disagree", "Disagree", "Neutral", "Agree", "Strongly agree"];
        this.enumValue = this.enumValues[this.value];
      },
      immediateValueChanged: function() {
        var horizontalOffset = 0, color = "3f51b5";
        this.enumValue = this.enumValues[this.immediateValue];
        if (this.styleElement === undefined) {
          this.styleElement = this.shadowRoot.appendChild(document.createElement("style"));
        }
        switch (this.immediateValue) {
          case 0: horizontalOffset = 0; color = "c8c8c8"; break;
          case 1: horizontalOffset = 34; break;
          case 2: horizontalOffset = 19; break;
          case 3: horizontalOffset = 16; break;
          case 4: horizontalOffset = 13; break;
          case 5: horizontalOffset = 64; break;
        }
        this.styleElement.innerHTML = ".pin > #sliderKnob > #sliderKnobInner::after { " +
          "left: -" + horizontalOffset + "px; " +
          "background: #" + color + "; border-color: #" + color + ";" +
          "}";
        this.super();
      }
    });
  </script>
</polymer-element>

<polymer-element name="my-element" noscript>
  <template>
    <style>
      :host { font-family: "Helvetica Neue", sans-serif; }
      :host .label { width: 150px; }
    </style>
    <div layout horizontal>
      <div class="label" self-center>GOOD</div>
      <rate-picker></rate-picker>
    </div>
    <div layout horizontal>
      <div class="label" self-center>BAD</div>
      <rate-picker></rate-picker>
    </div>
    <div layout horizontal>
      <div class="label" self-center>HONEST</div>
      <rate-picker></rate-picker>
    </div>
    <div layout horizontal>
      <div class="label" self-center>LIKEABLE</div>
      <rate-picker></rate-picker>
    </div>
    <div layout horizontal>
      <div class="label" self-center>PURPLE</div>
      <rate-picker></rate-picker>
    </div>
  </template>
</polymer-element>
<br />
<my-element></my-element>

＆＃13;

＆＃13;

＆＃13;