0000: 27 75 73 65 20 73 74 72 69 63 74 27 3b 0a 0a 6c 'use strict';..l
0010: 65 74 20 73 76 67 20 3d 20 72 65 71 75 69 72 65 et svg = require
0020: 28 27 2e 2e 2f 75 74 69 6c 2f 73 76 67 27 29 3b ('../util/svg');
0030: 0a 6c 65 74 20 49 6e 74 65 72 66 61 63 65 20 3d .let Interface =
0040: 20 72 65 71 75 69 72 65 28 27 2e 2e 2f 63 6f 72 require('../cor
0050: 65 2f 69 6e 74 65 72 66 61 63 65 27 29 3b 0a 6c e/interface');.l
0060: 65 74 20 53 74 65 70 20 3d 20 72 65 71 75 69 72 et Step = requir
0070: 65 28 27 2e 2e 2f 6d 6f 64 65 6c 73 2f 73 74 65 e('../models/ste
0080: 70 27 29 3b 0a 69 6d 70 6f 72 74 20 2a 20 61 73 p');.import * as
0090: 20 49 6e 74 65 72 61 63 74 69 6f 6e 20 66 72 6f Interaction fro
00a0: 6d 20 27 2e 2e 2f 75 74 69 6c 2f 69 6e 74 65 72 m '../util/inter
00b0: 61 63 74 69 6f 6e 27 3b 0a 0a 2f 2a 2a 0a 2a 20 action';../**.*
00c0: 53 6c 69 64 65 72 0a 2a 0a 2a 20 40 64 65 73 63 Slider.*.* @desc
00d0: 72 69 70 74 69 6f 6e 20 48 6f 72 69 7a 6f 6e 74 ription Horizont
00e0: 61 6c 20 6f 72 20 76 65 72 74 69 63 61 6c 20 73 al or vertical s
00f0: 6c 69 64 65 72 20 77 69 74 68 20 73 65 74 74 61 lider with setta
0100: 62 6c 65 20 69 6e 74 65 72 61 63 74 69 6f 6e 20 ble interaction
0110: 6d 6f 64 65 73 2e 0a 2a 0a 2a 20 40 64 65 6d 6f modes..*.* @demo
0120: 20 3c 73 70 61 6e 20 6e 65 78 75 73 2d 75 69 3d <span nexus-ui=
0130: 22 73 6c 69 64 65 72 22 20 73 74 65 70 3d 30 2e "slider" step=0.
0140: 32 3e 3c 2f 73 70 61 6e 3e 0a 2a 0a 2a 20 40 65 2></span>.*.* @e
0150: 78 61 6d 70 6c 65 0a 2a 20 76 61 72 20 73 6c 69 xample.* var sli
0160: 64 65 72 20 3d 20 6e 65 77 20 4e 65 78 75 73 2e der = new Nexus.
0170: 53 6c 69 64 65 72 28 27 23 74 61 72 67 65 74 27 Slider('#target'
0180: 29 0a 2a 0a 2a 20 40 65 78 61 6d 70 6c 65 0a 2a ).*.* @example.*
0190: 20 76 61 72 20 73 6c 69 64 65 72 20 3d 20 6e 65 var slider = ne
01a0: 77 20 4e 65 78 75 73 2e 53 6c 69 64 65 72 28 27 w Nexus.Slider('
01b0: 23 74 61 72 67 65 74 27 2c 7b 0a 2a 20 20 20 20 #target',{.*
01c0: 20 27 73 69 7a 65 27 3a 20 5b 31 32 30 2c 32 30 'size': [120,20
01d0: 5d 2c 0a 2a 20 20 20 20 20 27 6d 6f 64 65 27 3a ],.* 'mode':
01e0: 20 27 72 65 6c 61 74 69 76 65 27 2c 20 20 2f 2f 'relative', //
01f0: 20 27 72 65 6c 61 74 69 76 65 27 20 6f 72 20 27 'relative' or '
0200: 61 62 73 6f 6c 75 74 65 27 0a 2a 20 20 20 20 20 absolute'.*
0210: 27 6d 69 6e 27 3a 20 30 2c 0a 2a 20 20 20 20 20 'min': 0,.*
0220: 27 6d 61 78 27 3a 20 31 2c 0a 2a 20 20 20 20 20 'max': 1,.*
0230: 27 73 74 65 70 27 3a 20 30 2c 0a 2a 20 20 20 20 'step': 0,.*
0240: 20 27 76 61 6c 75 65 27 3a 20 30 0a 2a 20 7d 29 'value': 0.* })
0250: 0a 2a 0a 2a 20 40 6f 75 74 70 75 74 0a 2a 20 63 .*.* @output.* c
0260: 68 61 6e 67 65 0a 2a 20 46 69 72 65 73 20 77 68 hange.* Fires wh
0270: 65 6e 20 74 68 65 20 69 6e 74 65 72 66 61 63 65 en the interface
0280: 27 73 20 76 61 6c 75 65 20 63 68 61 6e 67 65 73 's value changes
0290: 2e 20 3c 62 72 3e 0a 2a 20 45 76 65 6e 74 20 64 . <br>.* Event d
02a0: 61 74 61 3a 20 3c 69 3e 6e 75 6d 62 65 72 3c 2f ata: <i>number</
02b0: 69 3e 20 54 68 65 20 6e 75 6d 62 65 72 20 76 61 i> The number va
02c0: 6c 75 65 20 6f 66 20 74 68 65 20 69 6e 74 65 72 lue of the inter
02d0: 66 61 63 65 2e 0a 2a 0a 2a 20 40 6f 75 74 70 75 face..*.* @outpu
02e0: 74 65 78 61 6d 70 6c 65 0a 2a 20 73 6c 69 64 65 texample.* slide
02f0: 72 2e 6f 6e 28 27 63 68 61 6e 67 65 27 2c 66 75 r.on('change',fu
0300: 6e 63 74 69 6f 6e 28 76 29 20 7b 0a 2a 20 20 20 nction(v) {.*
0310: 63 6f 6e 73 6f 6c 65 2e 6c 6f 67 28 76 29 3b 0a console.log(v);.
0320: 2a 20 7d 29 0a 2a 0a 2a 0a 2a 2f 0a 0a 65 78 70 * }).*.*.*/..exp
0330: 6f 72 74 20 64 65 66 61 75 6c 74 20 63 6c 61 73 ort default clas
0340: 73 20 53 6c 69 64 65 72 20 65 78 74 65 6e 64 73 s Slider extends
0350: 20 49 6e 74 65 72 66 61 63 65 20 7b 0a 0a 20 20 Interface {..
0360: 63 6f 6e 73 74 72 75 63 74 6f 72 28 29 20 7b 0a constructor() {.
0370: 0a 20 20 20 20 6c 65 74 20 6f 70 74 69 6f 6e 73 . let options
0380: 20 3d 20 5b 27 6d 69 6e 27 2c 27 6d 61 78 27 2c = ['min','max',
0390: 27 76 61 6c 75 65 27 5d 3b 0a 0a 20 20 20 20 6c 'value'];.. l
03a0: 65 74 20 64 65 66 61 75 6c 74 73 20 3d 20 7b 0a et defaults = {.
03b0: 20 20 20 20 20 20 27 73 69 7a 65 27 3a 20 5b 31 'size': [1
03c0: 32 30 2c 32 30 5d 2c 0a 20 20 20 20 20 20 27 6d 20,20],. 'm
03d0: 6f 64 65 27 3a 20 27 72 65 6c 61 74 69 76 65 27 ode': 'relative'
03e0: 2c 20 20 2f 2f 20 27 72 65 6c 61 74 69 76 65 27 , // 'relative'
03f0: 20 6f 72 20 27 61 62 73 6f 6c 75 74 65 27 0a 20 or 'absolute'.
0400: 20 20 20 20 20 27 6d 69 6e 27 3a 20 30 2c 0a 20 'min': 0,.
0410: 20 20 20 20 20 27 6d 61 78 27 3a 20 31 2c 0a 20 'max': 1,.
0420: 20 20 20 20 20 27 73 74 65 70 27 3a 20 30 2c 0a 'step': 0,.
0430: 20 20 20 20 20 20 27 76 61 6c 75 65 27 3a 20 30 'value': 0
0440: 0a 20 20 20 20 7d 3b 0a 0a 20 20 20 20 73 75 70 . };.. sup
0450: 65 72 28 61 72 67 75 6d 65 6e 74 73 2c 6f 70 74 er(arguments,opt
0460: 69 6f 6e 73 2c 64 65 66 61 75 6c 74 73 29 3b 0a ions,defaults);.
0470: 0a 20 20 20 20 74 68 69 73 2e 6f 72 69 65 6e 74 . this.orient
0480: 61 74 69 6f 6e 20 3d 20 27 76 65 72 74 69 63 61 ation = 'vertica
0490: 6c 27 3b 20 2f 2f 20 54 68 69 73 20 77 69 6c 6c l'; // This will
04a0: 20 63 68 61 6e 67 65 20 61 75 74 6f 6d 61 74 69 change automati
04b0: 63 61 6c 6c 79 20 74 6f 20 27 68 6f 72 69 7a 6f cally to 'horizo
04c0: 6e 74 61 6c 27 69 66 20 74 68 65 20 69 6e 74 65 ntal'if the inte
04d0: 72 66 61 63 65 20 69 73 20 77 69 64 65 72 20 74 rface is wider t
04e0: 68 61 6e 20 69 74 20 69 73 20 74 61 6c 6c 2e 0a han it is tall..
04f0: 0a 20 20 20 20 74 68 69 73 2e 5f 76 61 6c 75 65 . this._value
0500: 20 3d 20 6e 65 77 20 53 74 65 70 28 74 68 69 73 = new Step(this
0510: 2e 73 65 74 74 69 6e 67 73 2e 6d 69 6e 2c 20 74 .settings.min, t
0520: 68 69 73 2e 73 65 74 74 69 6e 67 73 2e 6d 61 78 his.settings.max
0530: 2c 20 74 68 69 73 2e 73 65 74 74 69 6e 67 73 2e , this.settings.
0540: 73 74 65 70 2c 20 74 68 69 73 2e 73 65 74 74 69 step, this.setti
0550: 6e 67 73 2e 76 61 6c 75 65 29 3b 0a 0a 20 20 20 ngs.value);..
0560: 20 74 68 69 73 2e 70 6f 73 69 74 69 6f 6e 20 3d this.position =
0570: 20 6e 65 77 20 49 6e 74 65 72 61 63 74 69 6f 6e new Interaction
0580: 2e 48 61 6e 64 6c 65 28 74 68 69 73 2e 73 65 74 .Handle(this.set
0590: 74 69 6e 67 73 2e 6d 6f 64 65 2c 74 68 69 73 2e tings.mode,this.
05a0: 6f 72 69 65 6e 74 61 74 69 6f 6e 2c 5b 30 2c 74 orientation,[0,t
05b0: 68 69 73 2e 77 69 64 74 68 5d 2c 5b 74 68 69 73 his.width],[this
05c0: 2e 68 65 69 67 68 74 2c 30 5d 29 3b 0a 20 20 20 .height,0]);.
05d0: 20 74 68 69 73 2e 70 6f 73 69 74 69 6f 6e 2e 76 this.position.v
05e0: 61 6c 75 65 20 3d 20 74 68 69 73 2e 5f 76 61 6c alue = this._val
05f0: 75 65 2e 6e 6f 72 6d 61 6c 69 7a 65 64 3b 0a 0a ue.normalized;..
0600: 20 20 20 20 74 68 69 73 2e 69 6e 69 74 28 29 3b this.init();
0610: 0a 0a 20 20 20 20 74 68 69 73 2e 70 6f 73 69 74 .. this.posit
0620: 69 6f 6e 2e 64 69 72 65 63 74 69 6f 6e 20 3d 20 ion.direction =
0630: 74 68 69 73 2e 6f 72 69 65 6e 74 61 74 69 6f 6e this.orientation
0640: 3b 0a 0a 20 20 20 20 74 68 69 73 2e 65 6d 69 74 ;.. this.emit
0650: 28 27 63 68 61 6e 67 65 27 2c 74 68 69 73 2e 76 ('change',this.v
0660: 61 6c 75 65 29 3b 0a 0a 20 20 7d 0a 0a 20 20 62 alue);.. }.. b
0670: 75 69 6c 64 49 6e 74 65 72 66 61 63 65 28 29 20 uildInterface()
0680: 7b 0a 0a 20 20 20 20 74 68 69 73 2e 62 61 72 20 {.. this.bar
0690: 3d 20 73 76 67 2e 63 72 65 61 74 65 28 27 72 65 = svg.create('re
06a0: 63 74 27 29 3b 0a 20 20 20 20 74 68 69 73 2e 66 ct');. this.f
06b0: 69 6c 6c 62 61 72 20 3d 20 73 76 67 2e 63 72 65 illbar = svg.cre
06c0: 61 74 65 28 27 72 65 63 74 27 29 3b 0a 20 20 20 ate('rect');.
06d0: 20 74 68 69 73 2e 6b 6e 6f 62 20 3d 20 73 76 67 this.knob = svg
06e0: 2e 63 72 65 61 74 65 28 27 63 69 72 63 6c 65 27 .create('circle'
06f0: 29 3b 0a 0a 20 20 20 20 74 68 69 73 2e 65 6c 65 );.. this.ele
0700: 6d 65 6e 74 2e 61 70 70 65 6e 64 43 68 69 6c 64 ment.appendChild
0710: 28 74 68 69 73 2e 62 61 72 29 3b 0a 20 20 20 20 (this.bar);.
0720: 74 68 69 73 2e 65 6c 65 6d 65 6e 74 2e 61 70 70 this.element.app
0730: 65 6e 64 43 68 69 6c 64 28 74 68 69 73 2e 66 69 endChild(this.fi
0740: 6c 6c 62 61 72 29 3b 0a 20 20 20 20 74 68 69 73 llbar);. this
0750: 2e 65 6c 65 6d 65 6e 74 2e 61 70 70 65 6e 64 43 .element.appendC
0760: 68 69 6c 64 28 74 68 69 73 2e 6b 6e 6f 62 29 3b hild(this.knob);
0770: 0a 0a 20 20 7d 0a 0a 20 20 73 69 7a 65 49 6e 74 .. }.. sizeInt
0780: 65 72 66 61 63 65 28 29 20 7b 0a 0a 20 20 20 20 erface() {..
0790: 69 66 20 28 74 68 69 73 2e 77 69 64 74 68 20 3c if (this.width <
07a0: 20 74 68 69 73 2e 68 65 69 67 68 74 29 20 7b 0a this.height) {.
07b0: 20 20 20 20 20 20 74 68 69 73 2e 6f 72 69 65 6e this.orien
07c0: 74 61 74 69 6f 6e 20 3d 20 27 76 65 72 74 69 63 tation = 'vertic
07d0: 61 6c 27 3b 0a 20 20 20 20 20 20 74 68 69 73 2e al';. this.
07e0: 70 6f 73 69 74 69 6f 6e 2e 64 69 72 65 63 74 69 position.directi
07f0: 6f 6e 20 3d 20 27 76 65 72 74 69 63 61 6c 27 3b on = 'vertical';
0800: 0a 20 20 20 20 7d 20 65 6c 73 65 20 7b 0a 20 20 . } else {.
0810: 20 20 20 20 74 68 69 73 2e 6f 72 69 65 6e 74 61 this.orienta
0820: 74 69 6f 6e 20 3d 20 27 68 6f 72 69 7a 6f 6e 74 tion = 'horizont
0830: 61 6c 27 3b 0a 20 20 20 20 20 20 74 68 69 73 2e al';. this.
0840: 70 6f 73 69 74 69 6f 6e 2e 64 69 72 65 63 74 69 position.directi
0850: 6f 6e 20 3d 20 27 68 6f 72 69 7a 6f 6e 74 61 6c on = 'horizontal
0860: 27 3b 0a 20 20 20 20 7d 0a 0a 20 20 20 20 69 66 ';. }.. if
0870: 20 28 74 68 69 73 2e 70 6f 73 69 74 69 6f 6e 29 (this.position)
0880: 20 7b 0a 20 20 20 20 20 20 74 68 69 73 2e 70 6f {. this.po
0890: 73 69 74 69 6f 6e 2e 72 65 73 69 7a 65 28 5b 30 sition.resize([0
08a0: 2c 74 68 69 73 2e 77 69 64 74 68 5d 2c 5b 74 68 ,this.width],[th
08b0: 69 73 2e 68 65 69 67 68 74 2c 30 5d 29 3b 0a 20 is.height,0]);.
08c0: 20 20 20 7d 0a 0a 20 20 20 20 6c 65 74 20 78 2c }.. let x,
08d0: 20 79 2c 20 77 2c 20 68 2c 20 62 61 72 4f 66 66 y, w, h, barOff
08e0: 73 65 74 2c 20 63 6f 72 6e 65 72 52 61 64 69 75 set, cornerRadiu
08f0: 73 3b 0a 20 20 20 20 74 68 69 73 2e 6b 6e 6f 62 s;. this.knob
0900: 44 61 74 61 20 3d 20 7b 0a 20 20 20 20 20 20 6c Data = {. l
0910: 65 76 65 6c 3a 20 30 2c 0a 20 20 20 20 20 20 72 evel: 0,. r
0920: 3a 20 30 0a 20 20 20 20 7d 3b 0a 0a 20 20 20 20 : 0. };..
0930: 69 66 20 28 74 68 69 73 2e 6f 72 69 65 6e 74 61 if (this.orienta
0940: 74 69 6f 6e 20 3d 3d 3d 20 27 76 65 72 74 69 63 tion === 'vertic
0950: 61 6c 27 29 20 7b 0a 20 20 20 20 20 20 74 68 69 al') {. thi
0960: 73 2e 74 68 69 63 6b 6e 65 73 73 20 3d 20 74 68 s.thickness = th
0970: 69 73 2e 77 69 64 74 68 20 2f 20 32 3b 0a 20 20 is.width / 2;.
0980: 20 20 09 78 20 3d 20 74 68 69 73 2e 77 69 64 74 .x = this.widt
0990: 68 2f 32 3b 0a 20 20 20 20 09 79 20 3d 20 30 3b h/2;. .y = 0;
09a0: 0a 20 20 20 20 09 77 20 3d 20 74 68 69 73 2e 74 . .w = this.t
09b0: 68 69 63 6b 6e 65 73 73 3b 0a 20 20 20 20 09 68 hickness;. .h
09c0: 20 3d 20 74 68 69 73 2e 68 65 69 67 68 74 3b 0a = this.height;.
09d0: 20 20 20 20 20 20 74 68 69 73 2e 6b 6e 6f 62 44 this.knobD
09e0: 61 74 61 2e 72 20 3d 20 74 68 69 73 2e 74 68 69 ata.r = this.thi
09f0: 63 6b 6e 65 73 73 20 2a 20 30 2e 38 3b 0a 20 20 ckness * 0.8;.
0a00: 20 20 09 74 68 69 73 2e 6b 6e 6f 62 44 61 74 61 .this.knobData
0a10: 2e 6c 65 76 65 6c 20 3d 20 68 2d 74 68 69 73 2e .level = h-this.
0a20: 6b 6e 6f 62 44 61 74 61 2e 72 2d 74 68 69 73 2e knobData.r-this.
0a30: 6e 6f 72 6d 61 6c 69 7a 65 64 2a 28 68 2d 74 68 normalized*(h-th
0a40: 69 73 2e 6b 6e 6f 62 44 61 74 61 2e 72 2a 32 29 is.knobData.r*2)
0a50: 3b 0a 20 20 20 20 20 20 62 61 72 4f 66 66 73 65 ;. barOffse
0a60: 74 20 3d 20 27 74 72 61 6e 73 6c 61 74 65 28 27 t = 'translate('
0a70: 2b 74 68 69 73 2e 74 68 69 63 6b 6e 65 73 73 2a +this.thickness*
0a80: 28 2d 31 29 2f 32 2b 27 2c 30 29 27 3b 0a 20 20 (-1)/2+',0)';.
0a90: 20 20 20 20 63 6f 72 6e 65 72 52 61 64 69 75 73 cornerRadius
0aa0: 20 3d 20 77 2f 32 3b 0a 20 20 20 20 7d 20 65 6c = w/2;. } el
0ab0: 73 65 20 7b 0a 20 20 20 20 20 20 74 68 69 73 2e se {. this.
0ac0: 74 68 69 63 6b 6e 65 73 73 20 3d 20 74 68 69 73 thickness = this
0ad0: 2e 68 65 69 67 68 74 20 2f 20 32 3b 0a 20 20 20 .height / 2;.
0ae0: 20 09 78 20 3d 20 30 3b 0a 20 20 20 20 09 79 20 .x = 0;. .y
0af0: 3d 20 74 68 69 73 2e 68 65 69 67 68 74 2f 32 3b = this.height/2;
0b00: 0a 20 20 20 20 09 77 20 3d 20 74 68 69 73 2e 77 . .w = this.w
0b10: 69 64 74 68 3b 0a 20 20 20 20 09 68 20 3d 20 74 idth;. .h = t
0b20: 68 69 73 2e 74 68 69 63 6b 6e 65 73 73 3b 0a 20 his.thickness;.
0b30: 20 20 20 20 20 74 68 69 73 2e 6b 6e 6f 62 44 61 this.knobDa
0b40: 74 61 2e 72 20 3d 20 74 68 69 73 2e 74 68 69 63 ta.r = this.thic
0b50: 6b 6e 65 73 73 20 2a 20 30 2e 38 3b 0a 20 20 20 kness * 0.8;.
0b60: 20 09 74 68 69 73 2e 6b 6e 6f 62 44 61 74 61 2e .this.knobData.
0b70: 6c 65 76 65 6c 20 3d 20 74 68 69 73 2e 6e 6f 72 level = this.nor
0b80: 6d 61 6c 69 7a 65 64 2a 28 77 2d 74 68 69 73 2e malized*(w-this.
0b90: 6b 6e 6f 62 44 61 74 61 2e 72 2a 32 29 2b 74 68 knobData.r*2)+th
0ba0: 69 73 2e 6b 6e 6f 62 44 61 74 61 2e 72 3b 0a 20 is.knobData.r;.
0bb0: 20 20 20 20 20 62 61 72 4f 66 66 73 65 74 20 3d barOffset =
0bc0: 20 27 74 72 61 6e 73 6c 61 74 65 28 30 2c 27 2b 'translate(0,'+
0bd0: 74 68 69 73 2e 74 68 69 63 6b 6e 65 73 73 2a 28 this.thickness*(
0be0: 2d 31 29 2f 32 2b 27 29 27 3b 0a 20 20 20 20 20 -1)/2+')';.
0bf0: 20 63 6f 72 6e 65 72 52 61 64 69 75 73 20 3d 20 cornerRadius =
0c00: 68 2f 32 3b 0a 20 20 20 20 7d 0a 0a 20 20 20 20 h/2;. }..
0c10: 74 68 69 73 2e 62 61 72 2e 73 65 74 41 74 74 72 this.bar.setAttr
0c20: 69 62 75 74 65 28 27 78 27 2c 78 29 3b 0a 20 20 ibute('x',x);.
0c30: 20 20 74 68 69 73 2e 62 61 72 2e 73 65 74 41 74 this.bar.setAt
0c40: 74 72 69 62 75 74 65 28 27 79 27 2c 79 29 3b 0a tribute('y',y);.
0c50: 20 20 20 20 74 68 69 73 2e 62 61 72 2e 73 65 74 this.bar.set
0c60: 41 74 74 72 69 62 75 74 65 28 27 74 72 61 6e 73 Attribute('trans
0c70: 66 6f 72 6d 27 2c 62 61 72 4f 66 66 73 65 74 29 form',barOffset)
0c80: 3b 0a 20 20 20 20 74 68 69 73 2e 62 61 72 2e 73 ;. this.bar.s
0c90: 65 74 41 74 74 72 69 62 75 74 65 28 27 72 78 27 etAttribute('rx'
0ca0: 2c 63 6f 72 6e 65 72 52 61 64 69 75 73 29 3b 20 ,cornerRadius);
0cb0: 2f 2f 20 63 6f 72 6e 65 72 20 72 61 64 69 75 73 // corner radius
0cc0: 0a 20 20 20 20 74 68 69 73 2e 62 61 72 2e 73 65 . this.bar.se
0cd0: 74 41 74 74 72 69 62 75 74 65 28 27 72 79 27 2c tAttribute('ry',
0ce0: 63 6f 72 6e 65 72 52 61 64 69 75 73 29 3b 0a 20 cornerRadius);.
0cf0: 20 20 20 74 68 69 73 2e 62 61 72 2e 73 65 74 41 this.bar.setA
0d00: 74 74 72 69 62 75 74 65 28 27 77 69 64 74 68 27 ttribute('width'
0d10: 2c 77 29 3b 0a 20 20 20 20 74 68 69 73 2e 62 61 ,w);. this.ba
0d20: 72 2e 73 65 74 41 74 74 72 69 62 75 74 65 28 27 r.setAttribute('
0d30: 68 65 69 67 68 74 27 2c 68 29 3b 0a 0a 20 20 20 height',h);..
0d40: 20 69 66 20 28 74 68 69 73 2e 6f 72 69 65 6e 74 if (this.orient
0d50: 61 74 69 6f 6e 20 3d 3d 3d 20 27 76 65 72 74 69 ation === 'verti
0d60: 63 61 6c 27 29 20 7b 0a 20 20 20 20 20 20 74 68 cal') {. th
0d70: 69 73 2e 66 69 6c 6c 62 61 72 2e 73 65 74 41 74 is.fillbar.setAt
0d80: 74 72 69 62 75 74 65 28 27 78 27 2c 78 29 3b 0a tribute('x',x);.
0d90: 20 20 20 20 20 20 74 68 69 73 2e 66 69 6c 6c 62 this.fillb
0da0: 61 72 2e 73 65 74 41 74 74 72 69 62 75 74 65 28 ar.setAttribute(
0db0: 27 79 27 2c 74 68 69 73 2e 6b 6e 6f 62 44 61 74 'y',this.knobDat
0dc0: 61 2e 6c 65 76 65 6c 29 3b 0a 20 20 20 20 20 20 a.level);.
0dd0: 74 68 69 73 2e 66 69 6c 6c 62 61 72 2e 73 65 74 this.fillbar.set
0de0: 41 74 74 72 69 62 75 74 65 28 27 77 69 64 74 68 Attribute('width
0df0: 27 2c 77 29 3b 0a 20 20 20 20 20 20 74 68 69 73 ',w);. this
0e00: 2e 66 69 6c 6c 62 61 72 2e 73 65 74 41 74 74 72 .fillbar.setAttr
0e10: 69 62 75 74 65 28 27 68 65 69 67 68 74 27 2c 68 ibute('height',h
0e20: 2d 74 68 69 73 2e 6b 6e 6f 62 44 61 74 61 2e 6c -this.knobData.l
0e30: 65 76 65 6c 29 3b 0a 20 20 20 20 7d 20 65 6c 73 evel);. } els
0e40: 65 20 7b 0a 20 20 20 20 20 20 74 68 69 73 2e 66 e {. this.f
0e50: 69 6c 6c 62 61 72 2e 73 65 74 41 74 74 72 69 62 illbar.setAttrib
0e60: 75 74 65 28 27 78 27 2c 30 29 3b 0a 20 20 20 20 ute('x',0);.
0e70: 20 20 74 68 69 73 2e 66 69 6c 6c 62 61 72 2e 73 this.fillbar.s
0e80: 65 74 41 74 74 72 69 62 75 74 65 28 27 79 27 2c etAttribute('y',
0e90: 79 29 3b 0a 20 20 20 20 20 20 74 68 69 73 2e 66 y);. this.f
0ea0: 69 6c 6c 62 61 72 2e 73 65 74 41 74 74 72 69 62 illbar.setAttrib
0eb0: 75 74 65 28 27 77 69 64 74 68 27 2c 74 68 69 73 ute('width',this
0ec0: 2e 6b 6e 6f 62 44 61 74 61 2e 6c 65 76 65 6c 29 .knobData.level)
0ed0: 3b 0a 20 20 20 20 20 20 74 68 69 73 2e 66 69 6c ;. this.fil
0ee0: 6c 62 61 72 2e 73 65 74 41 74 74 72 69 62 75 74 lbar.setAttribut
0ef0: 65 28 27 68 65 69 67 68 74 27 2c 68 29 3b 0a 20 e('height',h);.
0f00: 20 20 20 7d 0a 20 20 20 20 74 68 69 73 2e 66 69 }. this.fi
0f10: 6c 6c 62 61 72 2e 73 65 74 41 74 74 72 69 62 75 llbar.setAttribu
0f20: 74 65 28 27 74 72 61 6e 73 66 6f 72 6d 27 2c 62 te('transform',b
0f30: 61 72 4f 66 66 73 65 74 29 3b 0a 20 20 20 20 74 arOffset);. t
0f40: 68 69 73 2e 66 69 6c 6c 62 61 72 2e 73 65 74 41 his.fillbar.setA
0f50: 74 74 72 69 62 75 74 65 28 27 72 78 27 2c 63 6f ttribute('rx',co
0f60: 72 6e 65 72 52 61 64 69 75 73 29 3b 0a 20 20 20 rnerRadius);.
0f70: 20 74 68 69 73 2e 66 69 6c 6c 62 61 72 2e 73 65 this.fillbar.se
0f80: 74 41 74 74 72 69 62 75 74 65 28 27 72 79 27 2c tAttribute('ry',
0f90: 63 6f 72 6e 65 72 52 61 64 69 75 73 29 3b 0a 0a cornerRadius);..
0fa0: 20 20 20 20 69 66 20 28 74 68 69 73 2e 6f 72 69 if (this.ori
0fb0: 65 6e 74 61 74 69 6f 6e 20 3d 3d 3d 20 27 76 65 entation === 've
0fc0: 72 74 69 63 61 6c 27 29 20 7b 0a 20 20 20 20 20 rtical') {.
0fd0: 20 74 68 69 73 2e 6b 6e 6f 62 2e 73 65 74 41 74 this.knob.setAt
0fe0: 74 72 69 62 75 74 65 28 27 63 78 27 2c 78 29 3b tribute('cx',x);
0ff0: 0a 20 20 20 20 20 20 74 68 69 73 2e 6b 6e 6f 62 . this.knob
1000: 2e 73 65 74 41 74 74 72 69 62 75 74 65 28 27 63 .setAttribute('c
1010: 79 27 2c 74 68 69 73 2e 6b 6e 6f 62 44 61 74 61 y',this.knobData
1020: 2e 6c 65 76 65 6c 29 3b 0a 20 20 20 20 7d 20 65 .level);. } e
1030: 6c 73 65 20 7b 0a 20 20 20 20 20 20 74 68 69 73 lse {. this
1040: 2e 6b 6e 6f 62 2e 73 65 74 41 74 74 72 69 62 75 .knob.setAttribu
1050: 74 65 28 27 63 78 27 2c 74 68 69 73 2e 6b 6e 6f te('cx',this.kno
1060: 62 44 61 74 61 2e 6c 65 76 65 6c 29 3b 0a 20 20 bData.level);.
1070: 20 20 20 20 74 68 69 73 2e 6b 6e 6f 62 2e 73 65 this.knob.se
1080: 74 41 74 74 72 69 62 75 74 65 28 27 63 79 27 2c tAttribute('cy',
1090: 79 29 3b 0a 20 20 20 20 7d 0a 20 20 20 20 74 68 y);. }. th
10a0: 69 73 2e 6b 6e 6f 62 2e 73 65 74 41 74 74 72 69 is.knob.setAttri
10b0: 62 75 74 65 28 27 72 27 2c 74 68 69 73 2e 6b 6e bute('r',this.kn
10c0: 6f 62 44 61 74 61 2e 72 29 3b 0a 0a 20 20 7d 0a obData.r);.. }.
10d0: 0a 20 20 63 6f 6c 6f 72 49 6e 74 65 72 66 61 63 . colorInterfac
10e0: 65 28 29 20 7b 0a 20 20 20 20 74 68 69 73 2e 62 e() {. this.b
10f0: 61 72 2e 73 65 74 41 74 74 72 69 62 75 74 65 28 ar.setAttribute(
1100: 27 66 69 6c 6c 27 2c 20 74 68 69 73 2e 63 6f 6c 'fill', this.col
1110: 6f 72 73 2e 66 69 6c 6c 29 3b 0a 20 20 20 20 74 ors.fill);. t
1120: 68 69 73 2e 66 69 6c 6c 62 61 72 2e 73 65 74 41 his.fillbar.setA
1130: 74 74 72 69 62 75 74 65 28 27 66 69 6c 6c 27 2c ttribute('fill',
1140: 20 74 68 69 73 2e 63 6f 6c 6f 72 73 2e 61 63 63 this.colors.acc
1150: 65 6e 74 29 3b 0a 20 20 20 20 74 68 69 73 2e 6b ent);. this.k
1160: 6e 6f 62 2e 73 65 74 41 74 74 72 69 62 75 74 65 nob.setAttribute
1170: 28 27 66 69 6c 6c 27 2c 20 74 68 69 73 2e 63 6f ('fill', this.co
1180: 6c 6f 72 73 2e 61 63 63 65 6e 74 29 3b 0a 20 20 lors.accent);.
1190: 7d 0a 0a 0a 20 20 72 65 6e 64 65 72 28 29 20 7b }... render() {
11a0: 0a 20 20 20 20 69 66 20 28 21 74 68 69 73 2e 63 . if (!this.c
11b0: 6c 69 63 6b 65 64 29 20 7b 0a 20 20 20 20 20 20 licked) {.
11c0: 74 68 69 73 2e 6b 6e 6f 62 44 61 74 61 2e 72 20 this.knobData.r
11d0: 3d 20 74 68 69 73 2e 74 68 69 63 6b 6e 65 73 73 = this.thickness
11e0: 2a 30 2e 37 35 3b 0a 20 20 20 20 7d 0a 20 20 20 *0.75;. }.
11f0: 20 74 68 69 73 2e 6b 6e 6f 62 2e 73 65 74 41 74 this.knob.setAt
1200: 74 72 69 62 75 74 65 28 27 72 27 2c 74 68 69 73 tribute('r',this
1210: 2e 6b 6e 6f 62 44 61 74 61 2e 72 29 3b 0a 0a 20 .knobData.r);..
1220: 20 20 20 69 66 20 28 74 68 69 73 2e 6f 72 69 65 if (this.orie
1230: 6e 74 61 74 69 6f 6e 20 3d 3d 3d 20 27 76 65 72 ntation === 'ver
1240: 74 69 63 61 6c 27 29 20 7b 0a 20 20 09 20 20 20 tical') {. .
1250: 74 68 69 73 2e 6b 6e 6f 62 44 61 74 61 2e 6c 65 this.knobData.le
1260: 76 65 6c 20 3d 20 74 68 69 73 2e 6b 6e 6f 62 44 vel = this.knobD
1270: 61 74 61 2e 72 2b 74 68 69 73 2e 5f 76 61 6c 75 ata.r+this._valu
1280: 65 2e 6e 6f 72 6d 61 6c 69 7a 65 64 2a 28 74 68 e.normalized*(th
1290: 69 73 2e 68 65 69 67 68 74 2d 74 68 69 73 2e 6b is.height-this.k
12a0: 6e 6f 62 44 61 74 61 2e 72 2a 32 29 3b 0a 20 20 nobData.r*2);.
12b0: 20 20 20 20 20 74 68 69 73 2e 6b 6e 6f 62 2e 73 this.knob.s
12c0: 65 74 41 74 74 72 69 62 75 74 65 28 27 63 79 27 etAttribute('cy'
12d0: 2c 74 68 69 73 2e 68 65 69 67 68 74 20 2d 20 74 ,this.height - t
12e0: 68 69 73 2e 6b 6e 6f 62 44 61 74 61 2e 6c 65 76 his.knobData.lev
12f0: 65 6c 29 3b 0a 20 20 20 20 20 20 20 74 68 69 73 el);. this
1300: 2e 66 69 6c 6c 62 61 72 2e 73 65 74 41 74 74 72 .fillbar.setAttr
1310: 69 62 75 74 65 28 27 79 27 2c 74 68 69 73 2e 68 ibute('y',this.h
1320: 65 69 67 68 74 20 2d 20 74 68 69 73 2e 6b 6e 6f eight - this.kno
1330: 62 44 61 74 61 2e 6c 65 76 65 6c 29 3b 0a 20 20 bData.level);.
1340: 20 20 20 20 20 74 68 69 73 2e 66 69 6c 6c 62 61 this.fillba
1350: 72 2e 73 65 74 41 74 74 72 69 62 75 74 65 28 27 r.setAttribute('
1360: 68 65 69 67 68 74 27 2c 74 68 69 73 2e 6b 6e 6f height',this.kno
1370: 62 44 61 74 61 2e 6c 65 76 65 6c 29 3b 0a 20 20 bData.level);.
1380: 20 20 7d 20 65 6c 73 65 20 7b 0a 20 20 09 20 20 } else {. .
1390: 20 74 68 69 73 2e 6b 6e 6f 62 44 61 74 61 2e 6c this.knobData.l
13a0: 65 76 65 6c 20 3d 20 74 68 69 73 2e 5f 76 61 6c evel = this._val
13b0: 75 65 2e 6e 6f 72 6d 61 6c 69 7a 65 64 2a 28 74 ue.normalized*(t
13c0: 68 69 73 2e 77 69 64 74 68 2d 74 68 69 73 2e 6b his.width-this.k
13d0: 6e 6f 62 44 61 74 61 2e 72 2a 32 29 2b 74 68 69 nobData.r*2)+thi
13e0: 73 2e 6b 6e 6f 62 44 61 74 61 2e 72 3b 0a 20 20 s.knobData.r;.
13f0: 20 20 20 20 20 74 68 69 73 2e 6b 6e 6f 62 2e 73 this.knob.s
1400: 65 74 41 74 74 72 69 62 75 74 65 28 27 63 78 27 etAttribute('cx'
1410: 2c 74 68 69 73 2e 6b 6e 6f 62 44 61 74 61 2e 6c ,this.knobData.l
1420: 65 76 65 6c 29 3b 0a 20 20 20 20 20 20 20 74 68 evel);. th
1430: 69 73 2e 66 69 6c 6c 62 61 72 2e 73 65 74 41 74 is.fillbar.setAt
1440: 74 72 69 62 75 74 65 28 27 78 27 2c 30 29 3b 0a tribute('x',0);.
1450: 20 20 20 20 20 20 20 74 68 69 73 2e 66 69 6c 6c this.fill
1460: 62 61 72 2e 73 65 74 41 74 74 72 69 62 75 74 65 bar.setAttribute
1470: 28 27 77 69 64 74 68 27 2c 74 68 69 73 2e 6b 6e ('width',this.kn
1480: 6f 62 44 61 74 61 2e 6c 65 76 65 6c 29 3b 0a 20 obData.level);.
1490: 20 20 20 7d 0a 20 20 7d 0a 0a 0a 20 20 63 6c 69 }. }... cli
14a0: 63 6b 28 29 20 7b 0a 20 20 20 20 74 68 69 73 2e ck() {. this.
14b0: 6b 6e 6f 62 44 61 74 61 2e 72 20 3d 20 74 68 69 knobData.r = thi
14c0: 73 2e 74 68 69 63 6b 6e 65 73 73 2a 30 2e 39 3b s.thickness*0.9;
14d0: 0a 20 20 20 20 74 68 69 73 2e 70 6f 73 69 74 69 . this.positi
14e0: 6f 6e 2e 61 6e 63 68 6f 72 20 3d 20 74 68 69 73 on.anchor = this
14f0: 2e 6d 6f 75 73 65 3b 0a 20 20 20 20 74 68 69 73 .mouse;. this
1500: 2e 6d 6f 76 65 28 29 3b 0a 20 20 7d 0a 0a 20 20 .move();. }..
1510: 6d 6f 76 65 28 29 20 7b 0a 20 20 20 20 69 66 20 move() {. if
1520: 28 74 68 69 73 2e 63 6c 69 63 6b 65 64 29 20 7b (this.clicked) {
1530: 0a 20 20 20 20 20 20 74 68 69 73 2e 70 6f 73 69 . this.posi
1540: 74 69 6f 6e 2e 75 70 64 61 74 65 28 74 68 69 73 tion.update(this
1550: 2e 6d 6f 75 73 65 29 3b 0a 20 20 20 20 20 20 74 .mouse);. t
1560: 68 69 73 2e 5f 76 61 6c 75 65 2e 75 70 64 61 74 his._value.updat
1570: 65 4e 6f 72 6d 61 6c 28 20 74 68 69 73 2e 70 6f eNormal( this.po
1580: 73 69 74 69 6f 6e 2e 76 61 6c 75 65 20 29 3b 0a sition.value );.
1590: 20 20 20 20 20 20 74 68 69 73 2e 65 6d 69 74 28 this.emit(
15a0: 27 63 68 61 6e 67 65 27 2c 74 68 69 73 2e 5f 76 'change',this._v
15b0: 61 6c 75 65 2e 76 61 6c 75 65 29 3b 0a 20 20 20 alue.value);.
15c0: 20 20 20 74 68 69 73 2e 72 65 6e 64 65 72 28 29 this.render()
15d0: 3b 0a 0a 20 20 20 20 7d 0a 20 20 7d 0a 0a 20 20 ;.. }. }..
15e0: 72 65 6c 65 61 73 65 28 29 20 7b 0a 20 20 20 20 release() {.
15f0: 74 68 69 73 2e 72 65 6e 64 65 72 28 29 3b 0a 20 this.render();.
1600: 20 7d 0a 0a 20 20 67 65 74 20 6e 6f 72 6d 61 6c }.. get normal
1610: 69 7a 65 64 28 29 20 7b 0a 20 20 20 20 72 65 74 ized() {. ret
1620: 75 72 6e 20 74 68 69 73 2e 5f 76 61 6c 75 65 2e urn this._value.
1630: 6e 6f 72 6d 61 6c 69 7a 65 64 3b 0a 20 20 7d 0a normalized;. }.
1640: 0a 20 20 2f 2a 2a 0a 20 20 54 68 65 20 73 6c 69 . /**. The sli
1650: 64 65 72 27 73 20 63 75 72 72 65 6e 74 20 76 61 der's current va
1660: 6c 75 65 2e 20 49 66 20 73 65 74 20 6d 61 6e 75 lue. If set manu
1670: 61 6c 6c 79 2c 20 77 69 6c 6c 20 75 70 64 61 74 ally, will updat
1680: 65 20 74 68 65 20 69 6e 74 65 72 66 61 63 65 20 e the interface
1690: 61 6e 64 20 74 72 69 67 67 65 72 20 74 68 65 20 and trigger the
16a0: 6f 75 74 70 75 74 20 65 76 65 6e 74 2e 0a 20 20 output event..
16b0: 40 74 79 70 65 20 7b 6e 75 6d 62 65 72 7d 0a 20 @type {number}.
16c0: 20 40 65 78 61 6d 70 6c 65 20 73 6c 69 64 65 72 @example slider
16d0: 2e 76 61 6c 75 65 20 3d 20 31 30 3b 0a 20 20 2a .value = 10;. *
16e0: 2f 0a 20 20 67 65 74 20 76 61 6c 75 65 28 29 20 /. get value()
16f0: 7b 0a 20 20 20 20 72 65 74 75 72 6e 20 74 68 69 {. return thi
1700: 73 2e 5f 76 61 6c 75 65 2e 76 61 6c 75 65 3b 0a s._value.value;.
1710: 20 20 7d 0a 20 20 73 65 74 20 76 61 6c 75 65 28 }. set value(
1720: 76 29 20 7b 0a 20 20 20 20 74 68 69 73 2e 5f 76 v) {. this._v
1730: 61 6c 75 65 2e 75 70 64 61 74 65 28 76 29 3b 0a alue.update(v);.
1740: 20 20 20 20 74 68 69 73 2e 70 6f 73 69 74 69 6f this.positio
1750: 6e 2e 76 61 6c 75 65 20 3d 20 74 68 69 73 2e 5f n.value = this._
1760: 76 61 6c 75 65 2e 6e 6f 72 6d 61 6c 69 7a 65 64 value.normalized
1770: 3b 0a 20 20 20 20 74 68 69 73 2e 65 6d 69 74 28 ;. this.emit(
1780: 27 63 68 61 6e 67 65 27 2c 74 68 69 73 2e 5f 76 'change',this._v
1790: 61 6c 75 65 2e 76 61 6c 75 65 29 3b 0a 20 20 20 alue.value);.
17a0: 20 74 68 69 73 2e 72 65 6e 64 65 72 28 29 3b 0a this.render();.
17b0: 20 20 7d 0a 0a 20 20 2f 2a 2a 0a 20 20 4c 6f 77 }.. /**. Low
17c0: 65 72 20 6c 69 6d 69 74 20 6f 66 20 74 68 65 20 er limit of the
17d0: 73 6c 69 64 65 72 73 27 73 20 6f 75 74 70 75 74 sliders's output
17e0: 20 72 61 6e 67 65 0a 20 20 40 74 79 70 65 20 7b range. @type {
17f0: 6e 75 6d 62 65 72 7d 0a 20 20 40 65 78 61 6d 70 number}. @examp
1800: 6c 65 20 73 6c 69 64 65 72 2e 6d 69 6e 20 3d 20 le slider.min =
1810: 31 30 30 30 3b 0a 20 20 2a 2f 0a 20 20 67 65 74 1000;. */. get
1820: 20 6d 69 6e 28 29 20 7b 0a 20 20 20 20 72 65 74 min() {. ret
1830: 75 72 6e 20 74 68 69 73 2e 5f 76 61 6c 75 65 2e urn this._value.
1840: 6d 69 6e 3b 0a 20 20 7d 0a 20 20 73 65 74 20 6d min;. }. set m
1850: 69 6e 28 76 29 20 7b 0a 20 20 20 20 74 68 69 73 in(v) {. this
1860: 2e 5f 76 61 6c 75 65 2e 6d 69 6e 20 3d 20 76 3b ._value.min = v;
1870: 0a 20 20 7d 0a 0a 20 20 2f 2a 2a 0a 20 20 55 70 . }.. /**. Up
1880: 70 65 72 20 6c 69 6d 69 74 20 6f 66 20 74 68 65 per limit of the
1890: 20 73 6c 69 64 65 72 27 73 20 6f 75 74 70 75 74 slider's output
18a0: 20 72 61 6e 67 65 0a 20 20 40 74 79 70 65 20 7b range. @type {
18b0: 6e 75 6d 62 65 72 7d 0a 20 20 40 65 78 61 6d 70 number}. @examp
18c0: 6c 65 20 73 6c 69 64 65 72 2e 6d 61 78 20 3d 20 le slider.max =
18d0: 31 30 30 30 3b 0a 20 20 2a 2f 0a 20 20 67 65 74 1000;. */. get
18e0: 20 6d 61 78 28 29 20 7b 0a 20 20 20 20 72 65 74 max() {. ret
18f0: 75 72 6e 20 74 68 69 73 2e 5f 76 61 6c 75 65 2e urn this._value.
1900: 6d 61 78 3b 0a 20 20 7d 0a 20 20 73 65 74 20 6d max;. }. set m
1910: 61 78 28 76 29 20 7b 0a 20 20 20 20 74 68 69 73 ax(v) {. this
1920: 2e 5f 76 61 6c 75 65 2e 6d 61 78 20 3d 20 76 3b ._value.max = v;
1930: 0a 20 20 7d 0a 0a 20 20 2f 2a 2a 0a 20 20 54 68 . }.. /**. Th
1940: 65 20 69 6e 63 72 65 6d 65 6e 74 20 74 68 61 74 e increment that
1950: 20 74 68 65 20 73 6c 69 64 65 72 27 73 20 76 61 the slider's va
1960: 6c 75 65 20 63 68 61 6e 67 65 73 20 62 79 2e 0a lue changes by..
1970: 20 20 40 74 79 70 65 20 7b 6e 75 6d 62 65 72 7d @type {number}
1980: 0a 20 20 40 65 78 61 6d 70 6c 65 20 73 6c 69 64 . @example slid
1990: 65 72 2e 73 74 65 70 20 3d 20 35 3b 0a 20 20 2a er.step = 5;. *
19a0: 2f 0a 20 20 67 65 74 20 73 74 65 70 28 29 20 7b /. get step() {
19b0: 0a 20 20 20 20 72 65 74 75 72 6e 20 74 68 69 73 . return this
19c0: 2e 5f 76 61 6c 75 65 2e 73 74 65 70 3b 0a 20 20 ._value.step;.
19d0: 7d 0a 20 20 73 65 74 20 73 74 65 70 28 76 29 20 }. set step(v)
19e0: 7b 0a 20 20 20 20 74 68 69 73 2e 5f 76 61 6c 75 {. this._valu
19f0: 65 2e 73 74 65 70 20 3d 20 76 3b 0a 20 20 7d 0a e.step = v;. }.
1a00: 0a 20 20 2f 2a 2a 0a 20 20 41 62 73 6f 6c 75 74 . /**. Absolut
1a10: 65 20 6d 6f 64 65 20 28 73 6c 69 64 65 72 27 73 e mode (slider's
1a20: 20 76 61 6c 75 65 20 6a 75 6d 70 73 20 74 6f 20 value jumps to
1a30: 6d 6f 75 73 65 20 63 6c 69 63 6b 20 70 6f 73 69 mouse click posi
1a40: 74 69 6f 6e 29 20 6f 72 20 72 65 6c 61 74 69 76 tion) or relativ
1a50: 65 20 6d 6f 64 65 20 28 6d 6f 75 73 65 20 64 72 e mode (mouse dr
1a60: 61 67 20 63 68 61 6e 67 65 73 20 76 61 6c 75 65 ag changes value
1a70: 20 72 65 6c 61 74 69 76 65 20 74 6f 20 69 74 73 relative to its
1a80: 20 63 75 72 72 65 6e 74 20 70 6f 73 69 74 69 6f current positio
1a90: 6e 29 2e 20 44 65 66 61 75 6c 74 3a 20 22 72 65 n). Default: "re
1aa0: 6c 61 74 69 76 65 22 2e 0a 20 20 40 74 79 70 65 lative".. @type
1ab0: 20 7b 73 74 72 69 6e 67 7d 0a 20 20 40 65 78 61 {string}. @exa
1ac0: 6d 70 6c 65 20 73 6c 69 64 65 72 2e 6d 6f 64 65 mple slider.mode
1ad0: 20 3d 20 22 72 65 6c 61 74 69 76 65 22 3b 0a 20 = "relative";.
1ae0: 20 2a 2f 0a 20 20 67 65 74 20 6d 6f 64 65 28 29 */. get mode()
1af0: 20 7b 0a 20 20 20 20 72 65 74 75 72 6e 20 74 68 {. return th
1b00: 69 73 2e 70 6f 73 69 74 69 6f 6e 2e 6d 6f 64 65 is.position.mode
1b10: 3b 0a 20 20 7d 0a 20 20 73 65 74 20 6d 6f 64 65 ;. }. set mode
1b20: 28 76 29 20 7b 0a 20 20 20 20 74 68 69 73 2e 70 (v) {. this.p
1b30: 6f 73 69 74 69 6f 6e 2e 6d 6f 64 65 20 3d 20 76 osition.mode = v
1b40: 3b 0a 20 20 7d 0a 0a 0a 0a 7d 0a ;. }....}.