third_party/polymer/v1_0/components-chromium/paper-slider/paper-slider.html - chromium/src - Git at Google

 <!--
 @license
 Copyright (c) 2015 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
 --><html><head><link rel="import" href="../polymer/polymer.html">
 <link rel="import" href="../iron-a11y-keys-behavior/iron-a11y-keys-behavior.html">
 <link rel="import" href="../iron-flex-layout/iron-flex-layout.html">
 <link rel="import" href="../iron-form-element-behavior/iron-form-element-behavior.html">
 <link rel="import" href="../iron-range-behavior/iron-range-behavior.html">
 <link rel="import" href="../paper-behaviors/paper-inky-focus-behavior.html">
 <link rel="import" href="../paper-progress/paper-progress.html">
 <link rel="import" href="../paper-styles/color.html">

 <!--
 Material design: [Sliders](https://www.google.com/design/spec/components/sliders.html)

 `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

 The following custom properties and mixins are available for styling:

 Custom property | Description | Default
 ----------------|-------------|----------
 `--paper-slider-container-color` | The background color of the bar | `--paper-grey-400`
 `--paper-slider-bar-color` | The background color of the slider | `transparent`
 `--paper-slider-active-color` | The progress bar color | `--google-blue-700`
 `--paper-slider-secondary-color` | The secondary progress bar color | `--google-blue-300`
 `--paper-slider-knob-color` | The knob color | `--google-blue-700`
 `--paper-slider-disabled-knob-color` | The disabled knob color | `--paper-grey-400`
 `--paper-slider-pin-color` | The pin color | `--google-blue-700`
 `--paper-slider-font-color` | The pin's text color | `#fff`
 `--paper-slider-markers-color` | The snaps markers color | `#000`
 `--paper-slider-disabled-active-color` | The disabled progress bar color | `--paper-grey-400`
 `--paper-slider-disabled-secondary-color` | The disabled secondary progress bar color | `--paper-grey-400`
 `--paper-slider-knob-start-color` | The fill color of the knob at the far left | `transparent`
 `--paper-slider-knob-start-border-color` | The border color of the knob at the far left | `--paper-grey-400`
 `--paper-slider-pin-start-color` | The color of the pin at the far left | `--paper-grey-400`
 `--paper-slider-height` | Height of the progress bar | `2px`
 `--paper-slider-input` | Mixin applied to the input in editable mode | `{}`

 @group Paper Elements
 @element paper-slider
 @demo demo/index.html
 @hero hero.svg
 -->

 </head><body><dom-module id="paper-slider">
   <template strip-whitespace="">
     <style>
       :host {
         @apply --layout;
         @apply --layout-justified;
         @apply --layout-center;
         width: 200px;
         cursor: default;
         user-select: none;
         -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
         --paper-progress-active-color: var(--paper-slider-active-color, var(--google-blue-700));
         --paper-progress-secondary-color: var(--paper-slider-secondary-color, var(--google-blue-300));
         --paper-progress-disabled-active-color: var(--paper-slider-disabled-active-color, var(--paper-grey-400));
         --paper-progress-disabled-secondary-color: var(--paper-slider-disabled-secondary-color, var(--paper-grey-400));
         --calculated-paper-slider-height: var(--paper-slider-height, 2px);
       }

       /* focus shows the ripple */
       :host(:focus) {
         outline: none;
       }

       /**
        * NOTE(keanulee): Though :host-context is not universally supported, some pages
        * still rely on paper-slider being flipped when dir="rtl" is set on body. For full
        * compatability, dir="rtl" must be explicitly set on paper-slider.
        */
       :host-context([dir="rtl"]) #sliderContainer {
         transform: scaleX(-1);
       }

       /**
        * NOTE(keanulee): This is separate from the rule above because :host-context may
        * not be recognized.
        */
       :host([dir="rtl"]) #sliderContainer {
         transform: scaleX(-1);
       }

       /**
        * NOTE(keanulee): Needed to override the :host-context rule (where supported)
        * to support LTR sliders in RTL pages.
        */
       :host([dir="ltr"]) #sliderContainer {
         transform: scaleX(1);
       }

       #sliderContainer {
         position: relative;
         width: 100%;
         height: calc(30px + var(--calculated-paper-slider-height));
         margin-left: calc(15px + var(--calculated-paper-slider-height)/2);
         margin-right: calc(15px + var(--calculated-paper-slider-height)/2);
       }

       #sliderContainer:focus {
         outline: 0;
       }

       #sliderContainer.editable {
         margin-top: 12px;
         margin-bottom: 12px;
       }

       .bar-container {
         position: absolute;
         top: 0;
         bottom: 0;
         left: 0;
         right: 0;
         overflow: hidden;
       }

       .ring > .bar-container {
         left: calc(5px + var(--calculated-paper-slider-height)/2);
         transition: left 0.18s ease;
       }

       .ring.expand.dragging > .bar-container {
         transition: none;
       }

       .ring.expand:not(.pin) > .bar-container {
         left: calc(8px + var(--calculated-paper-slider-height)/2);
       }

       #sliderBar {
         padding: 15px 0;
         width: 100%;
         background-color: var(--paper-slider-bar-color, transparent);
         --paper-progress-container-color: var(--paper-slider-container-color, var(--paper-grey-400));
         --paper-progress-height: var(--calculated-paper-slider-height);
       }

       .slider-markers {
         position: absolute;
         top: calc(14px + var(--paper-slider-height,2px)/2);
         height: var(--calculated-paper-slider-height);
         left: 0;
         right: -1px;
         box-sizing: border-box;
         pointer-events: none;
         @apply --layout-horizontal;
       }

       .slider-marker {
         @apply --layout-flex;
       }
       .slider-markers::after,
       .slider-marker::after {
         content: "";
         display: block;
         margin-left: -1px;
         width: 2px;
         height: var(--calculated-paper-slider-height);
         border-radius: 50%;
         background-color: var(--paper-slider-markers-color, #000);
       }

       .slider-knob {
         position: absolute;
         left: 0;
         top: 0;
         margin-left: calc(-15px - var(--calculated-paper-slider-height)/2);
         width: calc(30px + var(--calculated-paper-slider-height));
         height: calc(30px + var(--calculated-paper-slider-height));
       }

       .transiting > .slider-knob {
         transition: left 0.08s ease;
       }

       .slider-knob:focus {
         outline: none;
       }

       .slider-knob.dragging {
         transition: none;
       }

       .snaps > .slider-knob.dragging {
         transition: transform 0.08s ease;
       }

       .slider-knob-inner {
         margin: 10px;
         width: calc(100% - 20px);
         height: calc(100% - 20px);
         background-color: var(--paper-slider-knob-color, var(--google-blue-700));
         border: 2px solid var(--paper-slider-knob-color, var(--google-blue-700));
         border-radius: 50%;

         box-sizing: border-box;

         transition-property: transform, background-color, border;
         transition-duration: 0.18s;
         transition-timing-function: ease;
       }

       .expand:not(.pin) > .slider-knob > .slider-knob-inner {
         transform: scale(1.5);
       }

       .ring > .slider-knob > .slider-knob-inner {
         background-color: var(--paper-slider-knob-start-color, transparent);
         border: 2px solid var(--paper-slider-knob-start-border-color, var(--paper-grey-400));
       }

       .slider-knob-inner::before {
         background-color: var(--paper-slider-pin-color, var(--google-blue-700));
       }

       .pin > .slider-knob > .slider-knob-inner::before {
         content: "";
         position: absolute;
         top: 0;
         left: 50%;
         margin-left: -13px;
         width: 26px;
         height: 26px;
         border-radius: 50% 50% 50% 0;

         transform: rotate(-45deg) scale(0) translate(0);
       }

       .slider-knob-inner::before,
       .slider-knob-inner::after {
         transition: transform .18s ease, background-color .18s ease;
       }

       .pin.ring > .slider-knob > .slider-knob-inner::before {
         background-color: var(--paper-slider-pin-start-color, var(--paper-grey-400));
       }

       .pin.expand > .slider-knob > .slider-knob-inner::before {
         transform: rotate(-45deg) scale(1) translate(17px, -17px);
       }

       .pin > .slider-knob > .slider-knob-inner::after {
         content: attr(value);
         position: absolute;
         top: 0;
         left: 50%;
         margin-left: -16px;
         width: 32px;
         height: 26px;
         text-align: center;
         color: var(--paper-slider-font-color, #fff);
         font-size: 10px;

         transform: scale(0) translate(0);
       }

       .pin.expand > .slider-knob > .slider-knob-inner::after {
         transform: scale(1) translate(0, -17px);
         @apply --paper-slider-pin-text;
       }

       /* paper-input */
       .slider-input {
         width: 50px;
         overflow: hidden;
         --paper-input-container-input: {
           text-align: center;
         };
         @apply --paper-slider-input;
       }

       /* disabled state */
       #sliderContainer.disabled {
         pointer-events: none;
       }

       .disabled > .slider-knob > .slider-knob-inner {
         background-color: var(--paper-slider-disabled-knob-color, var(--paper-grey-400));
         border: 2px solid var(--paper-slider-disabled-knob-color, var(--paper-grey-400));
         transform: scale3d(0.75, 0.75, 1);
       }

       .disabled.ring > .slider-knob > .slider-knob-inner {
         background-color: var(--paper-slider-knob-start-color, transparent);
         border: 2px solid var(--paper-slider-knob-start-border-color, var(--paper-grey-400));
       }

       paper-ripple {
         color: var(--paper-slider-knob-color, var(--google-blue-700));
       }
     </style>

     <div id="sliderContainer" class$="[[_getClassNames(disabled, pin, snaps, immediateValue, min, expand, dragging, transiting, editable)]]">
       <div class="bar-container">
         <paper-progress disabled$="[[disabled]]" id="sliderBar" aria-hidden="true" min="[[min]]" max="[[max]]" step="[[step]]" value="[[immediateValue]]" secondary-progress="[[secondaryProgress]]" on-down="_bardown" on-up="_resetKnob" on-track="_onTrack">
         </paper-progress>
       </div>

       <template is="dom-if" if="[[snaps]]">
         <div class="slider-markers">
           <template is="dom-repeat" items="[[markers]]">
             <div class="slider-marker"></div>
           </template>
         </div>
       </template>

       <div id="sliderKnob" class="slider-knob" on-down="_knobdown" on-up="_resetKnob" on-track="_onTrack" on-transitionend="_knobTransitionEnd">
           <div class="slider-knob-inner" value$="[[immediateValue]]"></div>
       </div>
     </div>
   </template>

   </dom-module>
 <script src="paper-slider-extracted.js"></script></body></html>
	<!--
	@license
	Copyright (c) 2015 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
	--><html><head><link rel="import" href="../polymer/polymer.html">
	<link rel="import" href="../iron-a11y-keys-behavior/iron-a11y-keys-behavior.html">
	<link rel="import" href="../iron-flex-layout/iron-flex-layout.html">
	<link rel="import" href="../iron-form-element-behavior/iron-form-element-behavior.html">
	<link rel="import" href="../iron-range-behavior/iron-range-behavior.html">
	<link rel="import" href="../paper-behaviors/paper-inky-focus-behavior.html">
	<link rel="import" href="../paper-progress/paper-progress.html">
	<link rel="import" href="../paper-styles/color.html">

	<!--
	Material design: [Sliders](https://www.google.com/design/spec/components/sliders.html)

	`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

	The following custom properties and mixins are available for styling:

	Custom property \| Description \| Default
	----------------\|-------------\|----------
	`--paper-slider-container-color` \| The background color of the bar \| `--paper-grey-400`
	`--paper-slider-bar-color` \| The background color of the slider \| `transparent`
	`--paper-slider-active-color` \| The progress bar color \| `--google-blue-700`
	`--paper-slider-secondary-color` \| The secondary progress bar color \| `--google-blue-300`
	`--paper-slider-knob-color` \| The knob color \| `--google-blue-700`
	`--paper-slider-disabled-knob-color` \| The disabled knob color \| `--paper-grey-400`
	`--paper-slider-pin-color` \| The pin color \| `--google-blue-700`
	`--paper-slider-font-color` \| The pin's text color \| `#fff`
	`--paper-slider-markers-color` \| The snaps markers color \| `#000`
	`--paper-slider-disabled-active-color` \| The disabled progress bar color \| `--paper-grey-400`
	`--paper-slider-disabled-secondary-color` \| The disabled secondary progress bar color \| `--paper-grey-400`
	`--paper-slider-knob-start-color` \| The fill color of the knob at the far left \| `transparent`
	`--paper-slider-knob-start-border-color` \| The border color of the knob at the far left \| `--paper-grey-400`
	`--paper-slider-pin-start-color` \| The color of the pin at the far left \| `--paper-grey-400`
	`--paper-slider-height` \| Height of the progress bar \| `2px`
	`--paper-slider-input` \| Mixin applied to the input in editable mode \| `{}`

	@group Paper Elements
	@element paper-slider
	@demo demo/index.html
	@hero hero.svg
	-->

	</head><body><dom-module id="paper-slider">
	<template strip-whitespace="">
	<style>
	:host {
	@apply --layout;
	@apply --layout-justified;
	@apply --layout-center;
	width: 200px;
	cursor: default;
	user-select: none;
	-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
	--paper-progress-active-color: var(--paper-slider-active-color, var(--google-blue-700));
	--paper-progress-secondary-color: var(--paper-slider-secondary-color, var(--google-blue-300));
	--paper-progress-disabled-active-color: var(--paper-slider-disabled-active-color, var(--paper-grey-400));
	--paper-progress-disabled-secondary-color: var(--paper-slider-disabled-secondary-color, var(--paper-grey-400));
	--calculated-paper-slider-height: var(--paper-slider-height, 2px);
	}

	/* focus shows the ripple */
	:host(:focus) {
	outline: none;
	}

	/**
	* NOTE(keanulee): Though :host-context is not universally supported, some pages
	* still rely on paper-slider being flipped when dir="rtl" is set on body. For full
	* compatability, dir="rtl" must be explicitly set on paper-slider.
	*/
	:host-context([dir="rtl"]) #sliderContainer {
	transform: scaleX(-1);
	}

	/**
	* NOTE(keanulee): This is separate from the rule above because :host-context may
	* not be recognized.
	*/
	:host([dir="rtl"]) #sliderContainer {
	transform: scaleX(-1);
	}

	/**
	* NOTE(keanulee): Needed to override the :host-context rule (where supported)
	* to support LTR sliders in RTL pages.
	*/
	:host([dir="ltr"]) #sliderContainer {
	transform: scaleX(1);
	}

	#sliderContainer {
	position: relative;
	width: 100%;
	height: calc(30px + var(--calculated-paper-slider-height));
	margin-left: calc(15px + var(--calculated-paper-slider-height)/2);
	margin-right: calc(15px + var(--calculated-paper-slider-height)/2);
	}

	#sliderContainer:focus {
	outline: 0;
	}

	#sliderContainer.editable {
	margin-top: 12px;
	margin-bottom: 12px;
	}

	.bar-container {
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	overflow: hidden;
	}

	.ring > .bar-container {
	left: calc(5px + var(--calculated-paper-slider-height)/2);
	transition: left 0.18s ease;
	}

	.ring.expand.dragging > .bar-container {
	transition: none;
	}

	.ring.expand:not(.pin) > .bar-container {
	left: calc(8px + var(--calculated-paper-slider-height)/2);
	}

	#sliderBar {
	padding: 15px 0;
	width: 100%;
	background-color: var(--paper-slider-bar-color, transparent);
	--paper-progress-container-color: var(--paper-slider-container-color, var(--paper-grey-400));
	--paper-progress-height: var(--calculated-paper-slider-height);
	}

	.slider-markers {
	position: absolute;
	top: calc(14px + var(--paper-slider-height,2px)/2);
	height: var(--calculated-paper-slider-height);
	left: 0;
	right: -1px;
	box-sizing: border-box;
	pointer-events: none;
	@apply --layout-horizontal;
	}

	.slider-marker {
	@apply --layout-flex;
	}
	.slider-markers::after,
	.slider-marker::after {
	content: "";
	display: block;
	margin-left: -1px;
	width: 2px;
	height: var(--calculated-paper-slider-height);
	border-radius: 50%;
	background-color: var(--paper-slider-markers-color, #000);
	}

	.slider-knob {
	position: absolute;
	left: 0;
	top: 0;
	margin-left: calc(-15px - var(--calculated-paper-slider-height)/2);
	width: calc(30px + var(--calculated-paper-slider-height));
	height: calc(30px + var(--calculated-paper-slider-height));
	}

	.transiting > .slider-knob {
	transition: left 0.08s ease;
	}

	.slider-knob:focus {
	outline: none;
	}

	.slider-knob.dragging {
	transition: none;
	}

	.snaps > .slider-knob.dragging {
	transition: transform 0.08s ease;
	}

	.slider-knob-inner {
	margin: 10px;
	width: calc(100% - 20px);
	height: calc(100% - 20px);
	background-color: var(--paper-slider-knob-color, var(--google-blue-700));
	border: 2px solid var(--paper-slider-knob-color, var(--google-blue-700));
	border-radius: 50%;

	box-sizing: border-box;

	transition-property: transform, background-color, border;
	transition-duration: 0.18s;
	transition-timing-function: ease;
	}

	.expand:not(.pin) > .slider-knob > .slider-knob-inner {
	transform: scale(1.5);
	}

	.ring > .slider-knob > .slider-knob-inner {
	background-color: var(--paper-slider-knob-start-color, transparent);
	border: 2px solid var(--paper-slider-knob-start-border-color, var(--paper-grey-400));
	}

	.slider-knob-inner::before {
	background-color: var(--paper-slider-pin-color, var(--google-blue-700));
	}

	.pin > .slider-knob > .slider-knob-inner::before {
	content: "";
	position: absolute;
	top: 0;
	left: 50%;
	margin-left: -13px;
	width: 26px;
	height: 26px;
	border-radius: 50% 50% 50% 0;

	transform: rotate(-45deg) scale(0) translate(0);
	}

	.slider-knob-inner::before,
	.slider-knob-inner::after {
	transition: transform .18s ease, background-color .18s ease;
	}

	.pin.ring > .slider-knob > .slider-knob-inner::before {
	background-color: var(--paper-slider-pin-start-color, var(--paper-grey-400));
	}

	.pin.expand > .slider-knob > .slider-knob-inner::before {
	transform: rotate(-45deg) scale(1) translate(17px, -17px);
	}

	.pin > .slider-knob > .slider-knob-inner::after {
	content: attr(value);
	position: absolute;
	top: 0;
	left: 50%;
	margin-left: -16px;
	width: 32px;
	height: 26px;
	text-align: center;
	color: var(--paper-slider-font-color, #fff);
	font-size: 10px;

	transform: scale(0) translate(0);
	}

	.pin.expand > .slider-knob > .slider-knob-inner::after {
	transform: scale(1) translate(0, -17px);
	@apply --paper-slider-pin-text;
	}

	/* paper-input */
	.slider-input {
	width: 50px;
	overflow: hidden;
	--paper-input-container-input: {
	text-align: center;
	};
	@apply --paper-slider-input;
	}

	/* disabled state */
	#sliderContainer.disabled {
	pointer-events: none;
	}

	.disabled > .slider-knob > .slider-knob-inner {
	background-color: var(--paper-slider-disabled-knob-color, var(--paper-grey-400));
	border: 2px solid var(--paper-slider-disabled-knob-color, var(--paper-grey-400));
	transform: scale3d(0.75, 0.75, 1);
	}

	.disabled.ring > .slider-knob > .slider-knob-inner {
	background-color: var(--paper-slider-knob-start-color, transparent);
	border: 2px solid var(--paper-slider-knob-start-border-color, var(--paper-grey-400));
	}

	paper-ripple {
	color: var(--paper-slider-knob-color, var(--google-blue-700));
	}
	</style>

	<div id="sliderContainer" class$="[[_getClassNames(disabled, pin, snaps, immediateValue, min, expand, dragging, transiting, editable)]]">
	<div class="bar-container">
	<paper-progress disabled$="[[disabled]]" id="sliderBar" aria-hidden="true" min="[[min]]" max="[[max]]" step="[[step]]" value="[[immediateValue]]" secondary-progress="[[secondaryProgress]]" on-down="_bardown" on-up="_resetKnob" on-track="_onTrack">
	</paper-progress>
	</div>

	<template is="dom-if" if="[[snaps]]">
	<div class="slider-markers">
	<template is="dom-repeat" items="[[markers]]">
	<div class="slider-marker"></div>
	</template>
	</div>
	</template>

	<div id="sliderKnob" class="slider-knob" on-down="_knobdown" on-up="_resetKnob" on-track="_onTrack" on-transitionend="_knobTransitionEnd">
	<div class="slider-knob-inner" value$="[[immediateValue]]"></div>
	</div>
	</div>
	</template>

	</dom-module>
	<script src="paper-slider-extracted.js"></script></body></html>