1 <!-- 2 Copyright (c) 2014 The Polymer Project Authors. All rights reserved. 3 This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt 4 The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt 5 The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt 6 Code distributed by Google as part of the polymer project is also 7 subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt 8 --> 9 10 <!-- 11 `paper-slider` allows user to select a value from a range of values by 12 moving the slider thumb. The interactive nature of the slider makes it a 13 great choice for settings that reflect intensity levels, such as volume, 14 brightness, or color saturation. 15 16 Example: 17 18 <paper-slider></paper-slider> 19 20 Use `min` and `max` to specify the slider range. Default is 0 to 100. 21 22 Example: 23 24 <paper-slider min="10" max="200" value="110"></paper-slider> 25 26 Styling slider: 27 28 To change the slider progress bar color: 29 30 paper-slider::shadow #sliderBar::shadow #activeProgress { 31 background-color: #0f9d58; 32 } 33 34 To change the slider knob color: 35 36 paper-slider::shadow #sliderKnobInner { 37 background-color: #0f9d58; 38 } 39 40 To change the slider pin color: 41 42 paper-slider::shadow #sliderKnobInner::before { 43 background-color: #0f9d58; 44 } 45 46 To change the slider pin's value: 47 48 paper-slider::shadow #sliderKnobInner::after { 49 color: #0f9d58 50 } 51 52 To change the slider secondary progress bar color: 53 54 paper-slider::shadow #sliderBar::shadow #secondaryProgress { 55 background-color: #0f9d58; 56 } 57 58 @group Paper Elements 59 @element paper-slider 60 @extends core-range 61 @homepage github.io 62 --> 63 64 <link rel="import" href="../paper-progress/paper-progress.html"> 65 <link rel="import" href="../paper-input/paper-input.html"> 66 67 <polymer-element name="paper-slider" extends="core-range" attributes="snaps pin disabled secondaryProgress editable immediateValue" assetpath=""> 68 <template> 69 70 <link rel="stylesheet" href="paper-slider.css"> 71 72 <div id="sliderContainer" on-keydown="{{keydown}}"> 73 74 <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> 75 76 <template if="{{snaps && !disabled}}"> 77 <div class="slider-markers" horizontal="" layout=""> 78 <template repeat="{{markers}}"> 79 <div flex="" class="slider-marker"></div> 80 </template> 81 </div> 82 </template> 83 84 <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=""> 85 86 <div id="sliderKnobInner" value="{{immediateValue}}"></div> 87 88 </div> 89 90 </div> 91 92 <template if="{{editable}}"> 93 <paper-input id="input" class="slider-input" value="{{immediateValue}}" validate="^[-+]?[0-9]*\.?[0-9]+$" disabled?="{{disabled}}" on-change="{{inputChange}}"></paper-input> 94 </template> 95 96 </template> 97 98 </polymer-element> 99 <script src="paper-slider-extracted.js"></script>
