I've been customizing the Polymer paper-slider element to handle an enumerated list and cycle through these values in the slider instead of just showing numeric values. However, I'm struggling with getting the styles to align properly. When you run this code snippet, you'll notice that the div containing the text is not centered correctly over the pin. I also want the background color of the text to match the pin's color (it should be grey when at the leftmost position and colored otherwise). Additionally, I'd like to remove the circular hump behind it. Any assistance with CSS would be greatly appreciated!
If you have any suggestions on how to make this more efficient, please share them as well.
<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::after {
white-space: nowrap;
content: attr(value);
width: auto;
left: calc(15px - 100%);
background: #3f51b5;
border: 5px solid #3f51b5;
border-radius: 5px;
padding: 0 10px 0 10px;
height: 12px;
top: -3px;
line-height: 10px;
text-align: center;
color: #fff;
font-size: 10px;
-webkit-transform: scale(0) translate(0);
transform: scale(0) translate(0);
}
</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() {
this.enumValue = this.enumValues[this.immediateValue];
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>RED</div>
<rate-picker></rate-picker>
</div>
<div layout horizontal>
<div class="label" self-center>GREEN</div>
<rate-picker></rate-picker>
</div>
<div layout horizontal>
<div class="label" self-center>BLUE</div>
<rate-picker></rate-picker>
</div>
<div layout horizontal>
<div class="label" self-center>ORANGE</div>
<rate-picker></rate-picker>
</div>
<div layout horizontal>
<div class="label" self-center>PURPLE</div>
<rate-picker></rate-picker>
</div>
</template>
</polymer-element>
<my-element></my-element>