Material WebUI: cr-slider element for intelligent range mapping

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

+<link rel="import" href="chrome://resources/cr_elements/slider/slider_host_behavior.html">
 <link rel="import" href="chrome://resources/html/polymer.html">
+<link rel="import" href="chrome://resources/html/cr.html">
 <link rel="import" href="chrome://resources/polymer/v1_0/iron-collapse/iron-collapse.html">
 <link rel="import" href="chrome://resources/polymer/v1_0/iron-flex-layout/iron-flex-layout-classes.html">
 <link rel="import" href="chrome://resources/polymer/v1_0/paper-slider/paper-slider.html">
 <link rel="import" href="chrome://md-settings/controls/settings_checkbox.html">
 <link rel="import" href="chrome://md-settings/controls/settings_dropdown_menu.html">
 <link rel="import" href="chrome://md-settings/i18n_setup.html">
-<link rel="import" href="chrome://md-settings/prefs/prefs_behavior.html">
 <link rel="import" href="chrome://md-settings/settings_shared_css.html">
 
 <dom-module id="settings-keyboard">
   <template>
     <style include="settings-shared"></style>
     <div class="settings-box first">
       <div class="start">$i18n{keyboardKeySearch}</div>
       <settings-dropdown-menu
           pref="{{prefs.settings.language.xkb_remap_search_key_to}}"
           menu-options="[[keyMapTargetsWithCapsLock_]]">
@@ skipping 44 matching lines @@
           label="$i18n{keyboardEnableAutoRepeat}">
       </settings-checkbox>
     </div>
     <iron-collapse
         opened="[[prefs.settings.language.xkb_auto_repeat_enabled_r2.value]]">
       <div class="settings-box continuation settings-checkbox-spacer">
         <div class="start" id="repeatDelayLabel">$i18n{keyRepeatDelay}</div>
         <div class="layout horizontal center">
           <div>$i18n{keyRepeatDelayLong}</div>
           <paper-slider id="delaySlider" class="always-on" snaps
-              max="[[delayMaxTick_()]]" on-change="onDelaySliderChange_"
+              data-value-path="prefs.settings.language.xkb_auto_repeat_delay_r2.value"

[stevenjb, 2016/05/11 16:37:40]

nit: split line (here and below)?

[michaelpg, 2016/05/14 04:44:33]

meh. sometimes it helps, sometimes it doesn't, and splitting after = looks
weird/messy.

+              slider-tick-values="[[autoRepeatDelays_]]"
+              value="[[getSliderIndexFromValue(
+                  prefs.settings.language.xkb_auto_repeat_delay_r2.value,
+                  autoRepeatDelays_)]]"
+              on-change="onSliderChange" on-value-change="onSliderValueChange"
               disabled="[[!prefs.settings.language.xkb_auto_repeat_enabled_r2.value]]"
               aria-labelledby="repeatDelayLabel">
           </paper-slider>
           <div>$i18n{keyRepeatDelayShort}</div>
         </div>
       </div>
       <div class="settings-box continuation settings-checkbox-spacer">
         <div class="start" id="repeatRateLabel">$i18n{keyRepeatRate}</div>
         <div class="layout horizontal center">
           <div>$i18n{keyRepeatRateSlow}</div>
           <paper-slider id="repeatRateSlider" class="always-on" snaps
-              max="[[repeatRateMaxTick_()]]"
-              on-change="onRepeatRateSliderChange_"
-              disabled="{{!prefs.settings.language.xkb_auto_repeat_enabled_r2.value}}"
+              data-value-path="prefs.settings.language.xkb_auto_repeat_interval_r2.value"
+              slider-tick-values="[[autoRepeatIntervals_]]"
+              value="[[getSliderIndexFromValue(
+                  prefs.settings.language.xkb_auto_repeat_interval_r2.value,
+                  autoRepeatIntervals_)]]"
+              on-change="onSliderChange" on-value-change="onSliderValueChange"
+              disabled="[[!prefs.settings.language.xkb_auto_repeat_enabled_r2.value]]"
               aria-labelledby="repeatRateLabel">
           </paper-slider>
           <div>$i18n{keyRepeatRateFast}</div>
         </div>
       </div>
     </iron-collapse>
     <div id="keyboardOverlay" class="settings-box"
         on-tap="onShowKeyboardShortcutsOverlayTap_">
       $i18n{showKeyboardShortcutsOverlay}
     </div>
     <div class="settings-box" on-tap="onShowLanguageInputTap_">
       $i18n{keyboardShowLanguageAndInput}
     </div>
   </template>
   <script src="keyboard.js"></script>
 </dom-module>