| <link rel="import" href="chrome://resources/html/polymer.html"> |
| |
| <link rel="import" href="chrome://resources/cr_elements/policy/cr_policy_pref_behavior.html"> |
| <link rel="import" href="chrome://resources/html/assert.html"> |
| <link rel="import" href="chrome://resources/cr_elements/cr_slider/cr_slider.html"> |
| <link rel="import" href="../settings_vars_css.html"> |
| |
| <dom-module id="settings-slider"> |
| <template> |
| <style> |
| :host { |
| display: inline-flex; |
| } |
| |
| cr-policy-pref-indicator { |
| align-self: center; |
| margin-inline-start: var(--settings-controlled-by-spacing); |
| } |
| |
| #labels[disabled] { |
| color: var(--paper-grey-400); |
| } |
| |
| :host-context([dark]) #labels[disabled] { |
| color: var(--google-grey-refresh-500); |
| } |
| |
| div.outer { |
| align-items: stretch; |
| display: flex; |
| flex-direction: column; |
| margin: 8px 0; |
| min-width: 200px; |
| } |
| |
| #labels { |
| display: flex; |
| flex-direction: row; |
| justify-content: space-between; |
| margin: -4px 16px 0 16px; |
| } |
| |
| #labels > div { |
| font-size: 12px; |
| } |
| |
| #label-begin { |
| margin-inline-end: 4px; |
| } |
| |
| #label-end { |
| margin-inline-start: 4px; |
| } |
| </style> |
| <template is="dom-if" if="[[pref.controlledBy]]" restamp> |
| <cr-policy-pref-indicator pref="[[pref]]"></cr-policy-pref-indicator> |
| </template> |
| <div class="outer"> |
| <cr-slider id="slider" disabled$="[[disableSlider_]]" ticks="[[ticks]]" |
| on-cr-slider-value-changed="onSliderChanged_" max="[[max]]" |
| min="[[min]]" on-dragging-changed="onSliderChanged_" |
| on-updating-from-key="onSliderChanged_"></cr-slider> |
| <div id="labels" disabled$="[[disableSlider_]]"> |
| <div id="label-begin">[[labelMin]]</div> |
| <div id="label-end">[[labelMax]]</div> |
| </div> |
| </div> |
| </template> |
| <script src="settings_slider.js"></script> |
| </dom-module> |