MD Settings: cr-slider: Make display consistent and clean up.

chrome/browser/resources/settings/device_page/display.html

+<link rel="import" href="chrome://resources/cr_elements/cr_slider/cr_slider.html">
 <link rel="import" href="chrome://resources/html/i18n_behavior.html">
 <link rel="import" href="chrome://resources/html/md_select_css.html">
 <link rel="import" href="chrome://resources/html/polymer.html">
 <link rel="import" href="chrome://resources/polymer/v1_0/iron-flex-layout/classes/iron-flex-layout.html">
 <link rel="import" href="chrome://resources/polymer/v1_0/paper-button/paper-button.html">
 <link rel="import" href="chrome://resources/polymer/v1_0/paper-checkbox/paper-checkbox.html">
 <link rel="import" href="chrome://resources/polymer/v1_0/paper-icon-button/paper-icon-button-light.html">
-<link rel="import" href="chrome://resources/polymer/v1_0/paper-slider/paper-slider.html">
 <link rel="import" href="chrome://resources/polymer/v1_0/paper-tabs/paper-tabs.html">
 <link rel="import" href="chrome://resources/polymer/v1_0/paper-toggle-button/paper-toggle-button.html">
 <link rel="import" href="/device_page/display_layout.html">
 <link rel="import" href="/device_page/display_overscan_dialog.html">
 <link rel="import" href="/settings_shared_css.html">
 <link rel="import" href="/settings_vars_css.html">
 
 <dom-module id="settings-display">
   <template>
     <style include="settings-shared md-select">
@@ skipping 83 matching lines @@
             <option value="0">$i18n{displayScreenPrimary}</option>
             <option value="1">$i18n{displayScreenExtended}</option>
           </select>
           <span class="md-select-underline"></span>
         </div>
       </div>
       <div class="settings-box embedded two-line">
         <div class="start textarea layout vertical">
           <div>$i18n{displayResolutionTitle}</div>
           <div class="secondary layout self-start">
-            [[getResolutionText_(selectedDisplay, immediateSelectedModeIndex_)]]
+            [[getResolutionText_(selectedDisplay, selectedModeIndex_)]]
           </div>
         </div>
-        <paper-slider snaps max-markers="100" step="1"
-            disabled="[[!enableSetResolution_(selectedDisplay)]]"
-            min="0" max="[[maxModeIndex_]]"
-            value="[[selectedModeIndex_]]"
-            immediate-value="{{immediateSelectedModeIndex_}}"
-            on-change="onChangeMode_">
-        </paper-slider>
+        <cr-slider disabled="[[!enableSetResolution_(selectedDisplay)]]"
+            tick-values="[[modeValues_]]" value="{{selectedModeIndex_}}"
+            on-change="onSelectedModeChange_">
+        </cr-slider>
       </div>
       <div class="settings-box embedded">
         <div class="start textarea">$i18n{displayOrientation}</div>
         <div class="md-select-wrapper">
           <select class="md-select" value="[[selectedDisplay.rotation]]"
               on-change="onOrientationChange_">
             <option value="0">$i18n{displayOrientationStandard}</option>
             <option value="90">90</option>
             <option value="180">180</option>
             <option value="270">270</option>
@@ skipping 12 matching lines @@
       </div>
 
       <settings-display-overscan-dialog id="displayOverscan"
           display-id="{{overscanDisplayId}}">
       </settings-display-overscan-dialog>
 
     </div>
   </template>
   <script src="display.js"></script>
 </dom-module>