Index: third_party/polymer/components-chromium/paper-slider/paper-slider.html |
diff --git a/third_party/polymer/components-chromium/paper-slider/paper-slider.html b/third_party/polymer/components-chromium/paper-slider/paper-slider.html |
new file mode 100644 |
index 0000000000000000000000000000000000000000..cf1e1825e65a64887870d529edc59df3bd7edc9b |
--- /dev/null |
+++ b/third_party/polymer/components-chromium/paper-slider/paper-slider.html |
@@ -0,0 +1,99 @@ |
+<!-- |
+Copyright (c) 2014 The Polymer Project Authors. All rights reserved. |
+This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt |
+The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt |
+The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt |
+Code distributed by Google as part of the polymer project is also |
+subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt |
+--> |
+ |
+<!-- |
+`paper-slider` allows user to select a value from a range of values by |
+moving the slider thumb. The interactive nature of the slider makes it a |
+great choice for settings that reflect intensity levels, such as volume, |
+brightness, or color saturation. |
+ |
+Example: |
+ |
+ <paper-slider></paper-slider> |
+ |
+Use `min` and `max` to specify the slider range. Default is 0 to 100. |
+ |
+Example: |
+ |
+ <paper-slider min="10" max="200" value="110"></paper-slider> |
+ |
+Styling slider: |
+ |
+To change the slider progress bar color: |
+ |
+ paper-slider::shadow #sliderBar::shadow #activeProgress { |
+ background-color: #0f9d58; |
+ } |
+ |
+To change the slider knob color: |
+ |
+ paper-slider::shadow #sliderKnobInner { |
+ background-color: #0f9d58; |
+ } |
+ |
+To change the slider pin color: |
+ |
+ paper-slider::shadow #sliderKnobInner::before { |
+ background-color: #0f9d58; |
+ } |
+ |
+To change the slider pin's value: |
+ |
+ paper-slider::shadow #sliderKnobInner::after { |
+ color: #0f9d58 |
+ } |
+ |
+To change the slider secondary progress bar color: |
+ |
+ paper-slider::shadow #sliderBar::shadow #secondaryProgress { |
+ background-color: #0f9d58; |
+ } |
+ |
+@group Paper Elements |
+@element paper-slider |
+@extends core-range |
+@homepage github.io |
+--> |
+ |
+<link rel="import" href="../paper-progress/paper-progress.html"> |
+<link rel="import" href="../paper-input/paper-input.html"> |
+ |
+<polymer-element name="paper-slider" extends="core-range" attributes="snaps pin disabled secondaryProgress editable immediateValue" assetpath=""> |
+<template> |
+ |
+ <link rel="stylesheet" href="paper-slider.css"> |
+ |
+ <div id="sliderContainer" on-keydown="{{keydown}}"> |
+ |
+ <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> |
+ |
+ <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" class="{{ {pin : pin, snaps : snaps} | tokenList }}" on-down="{{expandKnob}}" on-up="{{resetKnob}}" on-trackstart="{{trackStart}}" on-trackx="{{trackx}}" on-trackend="{{trackEnd}}" on-transitionend="{{knobTransitionEnd}}" role="slider" aria-valuenow="{{value}}" aria-valuemin="{{min}}" aria-valuemax="{{max}}" aria-valuetext="{{value}}" tabindex="0" center-justified="" center="" horizontal="" layout=""> |
+ |
+ <div id="sliderKnobInner" value="{{immediateValue}}"></div> |
+ |
+ </div> |
+ |
+ </div> |
+ |
+ <template if="{{editable}}"> |
+ <paper-input id="input" class="slider-input" value="{{immediateValue}}" validate="^[-+]?[0-9]*\.?[0-9]+$" disabled?="{{disabled}}" on-change="{{inputChange}}"></paper-input> |
+ </template> |
+ |
+</template> |
+ |
+</polymer-element> |
+<script src="paper-slider-extracted.js"></script> |