chrome/browser/resources/settings/controls/settings_slider.html

<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">

<dom-module id="settings-slider">
  <template>
    <style>
      :host {
        display: inline-flex;
        margin-inline-end: -16px;
      }

      cr-policy-pref-indicator {
        align-self: center;
        margin-inline-start: var(--settings-controlled-by-spacing);
      }

      #labels[disabled] {
        color: var(--paper-grey-400);
      }

      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 {
        -webkit-margin-begin: 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-value-changed="onSliderChanged_" max="[[max]]" min="[[min]]"
          on-dragging-changed="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>