1 // Copyright 2013 The Chromium Authors. All rights reserved. 2 // Use of this source code is governed by a BSD-style license that can be 3 // found in the LICENSE file. 4 5 'use strict'; 6 7 /** 8 * @fileoverview A Slider control. Based on Chromium's MediaControls.Slider. 9 */ 10 11 /** 12 * Creates a slider control. 13 * 14 * @param {HTMLElement} container The containing div element. 15 * @param {number} value Initial value 16 * @param {number} min Minimum value 17 * @param {number} max Maximum value 18 * @param {?function(number)=} opt_onChange Value change handler 19 * @constructor 20 */ 21 function Slider(container, value, min, max, opt_onChange) { 22 this.container_ = container; 23 this.onChange_ = opt_onChange; 24 25 var containerDocument = this.container_.ownerDocument; 26 27 this.container_.classList.add('slider'); 28 29 this.input_ = containerDocument.createElement('input'); 30 this.input_.type = 'range'; 31 this.input_.min = min; 32 this.input_.max = max; 33 this.input_.value = value; 34 this.container_.appendChild(this.input_); 35 36 this.input_.addEventListener( 37 'change', this.onInputChange_.bind(this)); 38 this.input_.addEventListener( 39 'input', this.onInputChange_.bind(this)); 40 41 this.bar_ = containerDocument.createElement('div'); 42 this.bar_.className = 'bar'; 43 this.container_.appendChild(this.bar_); 44 45 this.filled_ = containerDocument.createElement('div'); 46 this.filled_.className = 'filled'; 47 this.bar_.appendChild(this.filled_); 48 49 var leftCap = containerDocument.createElement('div'); 50 leftCap.className = 'cap left'; 51 this.bar_.appendChild(leftCap); 52 53 var rightCap = containerDocument.createElement('div'); 54 rightCap.className = 'cap right'; 55 this.bar_.appendChild(rightCap); 56 57 this.updateFilledWidth_(); 58 }; 59 60 /** 61 * @return {number} The value of the input control. 62 */ 63 Slider.prototype.getValue = function() { 64 return this.input_.value; 65 }; 66 67 /** 68 * @param{number} value The value to set the input control to. 69 */ 70 Slider.prototype.setValue = function(value) { 71 this.input_.value = value; 72 this.updateFilledWidth_(); 73 }; 74 75 /** 76 * @return {HTMLInputElement} The underlying input control. 77 */ 78 Slider.prototype.getInput = function() { 79 return this.input_; 80 } 81 82 /** 83 * Updates the filled portion of the slider to reflect the slider's current 84 * value. 85 * @private 86 */ 87 Slider.prototype.updateFilledWidth_ = function() { 88 var proportion = (this.input_.value - this.input_.min) / 89 (this.input_.max - this.input_.min); 90 this.filled_.style.width = proportion * 100 + '%'; 91 }; 92 93 /** 94 * Called when the slider's value changes. 95 * @private 96 */ 97 Slider.prototype.onInputChange_ = function() { 98 this.updateFilledWidth_(); 99 if (this.onChange_) 100 this.onChange_(this.input_.value); 101 }; 102 103
