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/polymer/v1_0/paper-slider/paper-slider.html">

<dom-module id="settings-slider">
  <template>
    <style>
      :host {
        --calculated-paper-slider-height: var(--paper-slider-height, 2px);
        /* Counteract the margin on #sliderContainer in paper-slider.html. */
        -webkit-margin-end:
            calc(-15px - var(--calculated-paper-slider-height) / 2);
        display: inline-flex;
      }

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

      #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 {
        -webkit-margin-end: 4px;
      }

      #label-end {
        -webkit-margin-begin: 4px;
      }

      paper-slider {
        /* Make the slider bar always grey. */
        --paper-slider-active-color: var(--paper-grey-400);
        /* Make the knob always blue. */
        --paper-slider-knob-start-color: var(--google-blue-700);
        --paper-slider-knob-start-border-color: var(--google-blue-700);
        width: 100%;
      }
    </style>
    <template is="dom-if" if="[[pref.controlledBy]]" restamp>
      <cr-policy-pref-indicator pref="[[pref]]"></cr-policy-pref-indicator>
    </template>
    <div class="outer">
      <paper-slider id="slider"
          disabled$="[[disableSlider_]]" snaps
          on-immediate-value-changed="onSliderChanged_" max="[[max]]"
          min="[[min]]" on-up="resetTrackLock_">
      </paper-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>