Material WebUI: cr-slider element for intelligent range mapping

chrome/browser/resources/settings/appearance_page/appearance_fonts_page.html

Index: chrome/browser/resources/settings/appearance_page/appearance_fonts_page.html
diff --git a/chrome/browser/resources/settings/appearance_page/appearance_fonts_page.html b/chrome/browser/resources/settings/appearance_page/appearance_fonts_page.html
index a326c63d8f835b6cab4860562288273a3886f342..80f5950bc0feb76560cc6af4744822f95a802a57 100644
--- a/chrome/browser/resources/settings/appearance_page/appearance_fonts_page.html
+++ b/chrome/browser/resources/settings/appearance_page/appearance_fonts_page.html
@@ -1,7 +1,7 @@
+<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/polymer.html">
 <link rel="import" href="chrome://resources/html/web_ui_listener_behavior.html">
-<link rel="import" href="chrome://resources/polymer/v1_0/paper-slider/paper-slider.html">
 <link rel="import" href="/appearance_page/fonts_browser_proxy.html">
 <link rel="import" href="/controls/settings_dropdown_menu.html">
 <link rel="import" href="/i18n_setup.html">
@@ -12,23 +12,24 @@
     <style include="settings-shared"></style>
     <div class="settings-box first">
       <div class="start">$i18n{fontSize}</div>
-      <paper-slider class="always-on" id="sizeSlider"
-          value="{{fontSizeIndex_}}"
-          max="[[fontSizeRangeLimit_]]" max-markers="5"
-          immediate-value="{{immediateSizeIndex_}}" snaps>
-      </paper-slider>
+      <cr-slider class="always-on" id="sizeSlider" snaps max-markers="5"
+          value="{{prefs.webkit.webprefs.default_font_size.value}}"
+          tick-values="[[fontSizeRange_]]">
+      </cr-slider>
     </div>
     <div class="settings-box">
       <div class="start">$i18n{minimumFont}</div>
-      <div class="list-item" style$="[[computeStyle_(minimumFontSize_, prefs.webkit.webprefs.fonts.standard.Zyyy.value)]]">
-        <span>[[minimumFontSize_]]</span>:&nbsp;
-        $i18n{quickBrownFox}
+      <div class="list-item"
+          style$="[[computeStyle_(
+              prefs.webkit.webprefs.minimum_font_size.value,
+              prefs.webkit.webprefs.fonts.standard.Zyyy.value)]]">
+        <span>[[prefs.webkit.webprefs.minimum_font_size.value]]</span>
+        : $i18n{quickBrownFox}
       </div>
-      <paper-slider class="always-on" id="minimumSizeSlider"
-          value="{{minimumSizeIndex_}}"
-          max="[[minimumFontSizeRangeLimit_]]" max-markers="5"
-          immediate-value="{{immediateMinimumSizeIndex_}}" snaps>
-    </paper-slider>
+      <cr-slider class="always-on" id="minimumSizeSlider" snaps max-markers="5"
+          value="{{prefs.webkit.webprefs.minimum_font_size.value}}"
+          tick-values="[[minimumFontSizeRange_]]">
+      </cr-slider>
     </div>
     <div class="settings-box">
       <div class="start">
@@ -41,9 +42,11 @@
             </settings-dropdown-menu>
           </div>
           <div class="list-item underbar"
-              style$="[[computeStyle_(defaultFontSize_, prefs.webkit.webprefs.fonts.standard.Zyyy.value)]]">
-            <span>[[defaultFontSize_]]</span>:&nbsp;
-            $i18n{quickBrownFox}
+              style$="[[computeStyle_(
+                  prefs.webkit.webprefs.default_font_size.value,
+                  prefs.webkit.webprefs.fonts.standard.Zyyy.value)]]">
+            <span>[[prefs.webkit.webprefs.default_font_size.value]]</span>
+            : $i18n{quickBrownFox}
           </div>
         </div>
         <h2>$i18n{serifFont}</h2>
@@ -55,9 +58,11 @@
             </settings-dropdown-menu>
           </div>
           <div class="list-item underbar"
-              style$="[[computeStyle_(defaultFontSize_, prefs.webkit.webprefs.fonts.serif.Zyyy.value)]]">
-            <span>[[defaultFontSize_]]</span>:&nbsp;
-            $i18n{quickBrownFox}
+              style$="[[computeStyle_(
+                  prefs.webkit.webprefs.default_font_size.value,
+                  prefs.webkit.webprefs.fonts.serif.Zyyy.value)]]">
+            <span>[[prefs.webkit.webprefs.default_font_size.value]]</span>
+            : $i18n{quickBrownFox}
           </div>
         </div>
         <h2>$i18n{sansSerifFont}</h2>
@@ -69,9 +74,11 @@
             </settings-dropdown-menu>
           </div>
           <div class="list-item underbar"
-              style$="{{computeStyle_(defaultFontSize_, prefs.webkit.webprefs.fonts.sansserif.Zyyy.value)}}">
-            <span>[[defaultFontSize_]]</span>:&nbsp;
-            $i18n{quickBrownFox}
+              style$="{{computeStyle_(
+                  prefs.webkit.webprefs.default_font_size.value,
+                  prefs.webkit.webprefs.fonts.sansserif.Zyyy.value)}}">
+            <span>[[prefs.webkit.webprefs.default_font_size.value]]</span>
+            : $i18n{quickBrownFox}
           </div>
         </div>
         <h2>$i18n{fixedWidthFont}</h2>
@@ -83,9 +90,11 @@
             </settings-dropdown-menu>
            </div>
           <div class="list-item"
-              style$="[[computeStyle_(defaultFontSize_, prefs.webkit.webprefs.fonts.fixed.Zyyy.value)]]">
-            <span>[[defaultFontSize_]]</span>:&nbsp;
-            $i18n{quickBrownFox}
+              style$="[[computeStyle_(
+                  prefs.webkit.webprefs.default_font_size.value,
+                  prefs.webkit.webprefs.fonts.fixed.Zyyy.value)]]">
+            <span>[[prefs.webkit.webprefs.default_font_size.value]]</span>
+            : $i18n{quickBrownFox}
           </div>
         </div>
       </div>