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 */
21function 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 */
63Slider.prototype.getValue = function() {
64  return this.input_.value;
65};
66
67/**
68 * @param{number} value The value to set the input control to.
69 */
70Slider.prototype.setValue = function(value) {
71  this.input_.value = value;
72  this.updateFilledWidth_();
73};
74
75/**
76 * @return {HTMLInputElement} The underlying input control.
77 */
78Slider.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 */
87Slider.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 */
97Slider.prototype.onInputChange_ = function() {
98  this.updateFilledWidth_();
99  if (this.onChange_)
100    this.onChange_(this.input_.value);
101};
102
103