From 3c6900caea3476c8feb9797ad50746c696cb98a2 Mon Sep 17 00:00:00 2001 From: Jon Gunderson Date: Fri, 14 Jul 2017 14:54:42 -0500 Subject: [PATCH 01/11] initial implementation of a mutli-thumb slider --- examples/slider/css/multithumb-slider.css | 64 ++++++ examples/slider/images/arrow-down-a.png | Bin 0 -> 987 bytes examples/slider/images/arrow-up-a.png | Bin 0 -> 977 bytes examples/slider/js/multithumb-slider.js | 241 ++++++++++++++++++++++ examples/slider/multithumb-slider.html | 225 ++++++++++++++++++++ 5 files changed, 530 insertions(+) create mode 100644 examples/slider/css/multithumb-slider.css create mode 100644 examples/slider/images/arrow-down-a.png create mode 100644 examples/slider/images/arrow-up-a.png create mode 100644 examples/slider/js/multithumb-slider.js create mode 100644 examples/slider/multithumb-slider.html diff --git a/examples/slider/css/multithumb-slider.css b/examples/slider/css/multithumb-slider.css new file mode 100644 index 0000000000..13a1f6e01e --- /dev/null +++ b/examples/slider/css/multithumb-slider.css @@ -0,0 +1,64 @@ +/* CSS Document */ + +div.rail-label { + position: absolute; +} + +div.rail-label p { + margin-top: 1.5em; +} + +div.rail-label .dol #minPriceLabel { + text-align: left; +} + +div.rail-label #maxPriceLabel { + margin-left: 23em; +} + +div.aria-widget-slider { + margin-top: 0.5em; + margin-bottom: 0.5em; + height: 4em; +} + +div.aria-widget-slider .rail { + margin: 2px; + margin-left: 50px; + padding: 1px; + background-color: #eee; + border: 1px solid #888; + position: relative; + top: 2em; + height: 4px; +} + +div.aria-widget-slider .max { + position: relative; +} + +div.aria-widget-slider .thumb { + position: absolute; + width: 16px; +} + +div.aria-widget-slider .rail .thumb.focus, +div.aria-widget-slider .rail .thumb:hover { + outline: 2px solid #888; +} + +div.aria-widget-slider .rail.focus { + background-color: #AAA; +} + +div.aria-widget-slider .value { + width: 2em; + text-align: right; + position: absolute; +} + +label { + display: block; + margin-top: 0.5em; + margin-bottom: 0.5em; +} diff --git a/examples/slider/images/arrow-down-a.png b/examples/slider/images/arrow-down-a.png new file mode 100644 index 0000000000000000000000000000000000000000..ce503d734098fff986212138aa690733061b0f60 GIT binary patch literal 987 zcmeAS@N?(olHy`uVBq!ia0y~yU;;9k7+9Er6kFKIlR!!?z$e5NNaF$9HS)87(wrqh ze!&a^1`Y}J4GZ>*rJZ(XU|>%6ba4!+V0?4IQIauHgy8_Y=p9pr7J&!*ckkk46lvJT z#js)b``>9wKIrD(G1lI1+LJPE`u!*l0R@K!21X{9A5Qos<%x1g1|qliIQ z#$gI`#zTfhG7jAA0#6yDEE+V}FC1cY8C5#GLSWb1gBwA4gK5KrPs_O%l}Cf}CNh}A YcI2%5rnwo*pMXR?UHx3vIVCg!0Dpt{(EtDd literal 0 HcmV?d00001 diff --git a/examples/slider/images/arrow-up-a.png b/examples/slider/images/arrow-up-a.png new file mode 100644 index 0000000000000000000000000000000000000000..64e99029b9c600050ac727d91cf5cedd16e6935b GIT binary patch literal 977 zcmeAS@N?(olHy`uVBq!ia0y~yU;;9k7+9Er6kFKIlR!#3z$e5NNaF%i0v{;=*>~<{z+@)68XHV2<^4aSW+od~?v7ks*MEVZ(Pp53ilA1zX;to8|NLrtT|~ zoh1P*3JffUKCJU51e#i_&+d9~J;UR6^%mwkx^fTtN*LD4IxJz%c*~$9>yXVZ@RA|Q zy1|3}!YxJ@tA=ZQ3YQqSlrc=?Td!v5efBl2CFptP XUlnI)w}Pi<6G+0-)z4*}Q$iB}83_vi literal 0 HcmV?d00001 diff --git a/examples/slider/js/multithumb-slider.js b/examples/slider/js/multithumb-slider.js new file mode 100644 index 0000000000..ea065796d0 --- /dev/null +++ b/examples/slider/js/multithumb-slider.js @@ -0,0 +1,241 @@ +/* +* File: slider.js +* +* Desc: Slider widget that implements ARIA Authoring Practices +* +* Author(s): Jon Gunderson, Nicholas Hoyt, Brian Loh, and Mark McCarthy +*/ + +// Create Slider that contains value, valuemin, valuemax, and valuenow +var Slider = function (domNode) { + + this.domNode = domNode; + this.railDomNode = domNode.parentNode; + + this.valueDomNode = false; + this.minDomNode = false; + this.maxDomNode = false; + + this.valueNow = 50; + + this.railMin = 0; + this.railMax = 100; + this.railWidth = 0; + + this.thumbWidth = 16; + this.thumbHeight = 28; + + this.keyCode = Object.freeze({ + 'left' : 37, + 'up' : 38, + 'right' : 39, + 'down' : 40, + 'pageUp' : 33, + 'pageDown' : 34, + 'end' : 35, + 'home' : 36 + }); +}; + +// Initialize slider +Slider.prototype.init = function () { + + if(this.domNode.previousElementSibling) { + this.minDomNode = this.domNode.previousElementSibling; + this.railMin = parseInt((this.minDomNode.getAttribute('aria-valuemin'))); + } + else { + this.railMin = parseInt((this.domNode.getAttribute('aria-valuemin'))); + }; + + if (this.domNode.nextElementSibling) { + this.maxDomNode = this.domNode.nextElementSibling; + this.railMax = parseInt((this.maxDomNode.getAttribute('aria-valuemax'))); + } + + else { + this.railMax = parseInt((this.domNode.getAttribute('aria-valuemax'))); + } + + this.valueNow = parseInt((this.domNode.getAttribute('aria-valuenow'))); + + this.railWidth = parseInt(this.railDomNode.style.width.slice(0, -2)); + + this.valueDomNode = document.getElementById(this.domNode.getAttribute('aria-controls')); + + if (this.valueDomNode) { + this.valueDomNode.innerHTML = '0'; + this.valueDomNode.style.top = (this.railDomNode.offsetTop - 8) + 'px'; + } + + if (this.domNode.tabIndex != 0) { + this.domNode.tabIndex = 0; + } + + //this.domNode.style.width = this.thumbWidth + 'px'; + this.domNode.style.height = this.thumbHeight + 'px'; + //this.domNode.style.top = ((this.thumbHeight / -2) - 15) + 'px'; + + this.domNode.addEventListener('keydown', this.handleKeyDown.bind(this)); + // add onmousedown, move, and onmouseup + this.domNode.addEventListener('mousedown', this.handleMouseDown.bind(this)); + this.domNode.addEventListener('focus', this.handleFocus.bind(this)); + this.domNode.addEventListener('blur', this.handleBlur.bind(this)); + + this.moveSliderTo(this.valueNow); + +}; + +Slider.prototype.moveSliderTo = function (value) { + var valueMax = parseInt(this.domNode.getAttribute('aria-valuemax')); + var valueMin = parseInt(this.domNode.getAttribute('aria-valuemin')); + + if (value > valueMax) { + value = valueMax; + } + + if (value < valueMin) { + value = valueMin; + } + + this.valueNow = value; + this.dolValueNow = "$" + value; + + this.domNode.setAttribute('aria-valuenow', this.valueNow); + + if (this.minDomNode) { + this.minDomNode.setAttribute('aria-valuemax', this.valueNow); + } + + if (this.maxDomNode) { + this.maxDomNode.setAttribute('aria-valuemin', this.valueNow); + } + + var pos = Math.round( + ((this.valueNow - this.railMin) * this.railWidth) / (this.railMax - this.railMin) + ) - (this.thumbWidth / 2); + + this.domNode.style.left = pos + 'px'; + + if (this.valueDomNode) { + this.valueDomNode.innerHTML = this.dolValueNow.toString(); + this.valueDomNode.style.left = (this.railDomNode.offsetLeft + this.railWidth + 10) + 'px'; + } +}; + +Slider.prototype.handleKeyDown = function (event) { + + var flag = false; + + switch (event.keyCode) { + case this.keyCode.left: + case this.keyCode.down: + this.moveSliderTo(this.valueNow - 1); + flag = true; + break; + + case this.keyCode.right: + case this.keyCode.up: + this.moveSliderTo(this.valueNow + 1); + flag = true; + break; + + case this.keyCode.pageDown: + this.moveSliderTo(this.valueNow - 10); + flag = true; + break; + + case this.keyCode.pageUp: + this.moveSliderTo(this.valueNow + 10); + flag = true; + break; + + case this.keyCode.home: + this.moveSliderTo(this.railMin); + flag = true; + break; + + case this.keyCode.end: + this.moveSliderTo(this.railMax); + flag = true; + break; + + default: + break; + } + + if (flag) { + event.preventDefault(); + event.stopPropagation(); + } + +}; + +Slider.prototype.handleFocus = function (event) { + this.domNode.classList.add('focus'); + this.railDomNode.classList.add('focus'); +}; + +Slider.prototype.handleBlur = function (event) { + this.domNode.classList.remove('focus'); + this.railDomNode.classList.remove('focus'); +}; + +Slider.prototype.handleMouseDown = function (event) { + + var self = this; + + var handleMouseMove = function (event) { + + var diffX = event.pageX - self.railDomNode.offsetLeft; + self.valueNow = self.railMin + parseInt(((self.railMax - self.railMin) * diffX) / self.railWidth); + self.moveSliderTo(self.valueNow); + + event.preventDefault(); + event.stopPropagation(); + }; + + var handleMouseUp = function (event) { + + document.removeEventListener('mousemove', handleMouseMove); + document.removeEventListener('mouseup', handleMouseUp); + + }; + + // bind a mousemove event handler to move pointer + document.addEventListener('mousemove', handleMouseMove); + + // bind a mouseup event handler to stop tracking mouse movements + document.addEventListener('mouseup', handleMouseUp); + + event.preventDefault(); + event.stopPropagation(); + + // Set focus to the clicked handle + this.domNode.focus(); + + }; + +// handleMouseMove has the same functionality as we need for handleMouseClick on the rail +//Slider.prototype.handleClick = function (event) { + +// var diffX = event.pageX - this.railDomNode.offsetLeft; +// this.valueNow = parseInt(((this.railMax - this.railMin) * diffX) / this.railWidth); +// this.moveSliderTo(this.valueNow); + +// event.preventDefault(); +// event.stopPropagation(); + +//}; + +// Initialise Sliders on the page +window.addEventListener('load', function () { + + var sliders = document.querySelectorAll('[role=slider]');; + + for (var i = 0; i < sliders.length; i++) { + var s = new Slider(sliders[i]); + s.init(); + } + +}); diff --git a/examples/slider/multithumb-slider.html b/examples/slider/multithumb-slider.html new file mode 100644 index 0000000000..384c6b43e5 --- /dev/null +++ b/examples/slider/multithumb-slider.html @@ -0,0 +1,225 @@ + + + + + Horizontal Slider Example | WAI-ARIA Authoring Practices 1.1 + + + + + + + + + + + + + +
+

Horizontal Multi-Thumb Slider Example

+

+ Following is an example of a multi-thumb slider that demonstrates the + slider (Multi-Thumb) design pattern. + The example illustrates a typical price range selector found on travel websites. + Change the desired price range by moving the arrows for the maximum and minumum price. + The price labels on either end of the slider will update as you move the corresponding thumb. +

+

Similar examples include:

+ +
+

Example

+ +
+
+
Minimum Hotel Price: $0
+
Maximum Hotel Price: $270
+ + +
+

0

+

0

+
+ + + + +
+
+
+
+ +
+ +
+

Keyboard Support

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
KeyFunction
Right ArrowIncreases slider value one step.
Up ArrowIncreases slider value one step.
Left ArrowDecreases slider value one step.
Down ArrowDecreases slider value one step.
Page UpIncreases slider value multiple steps. In this slider, jumps ten steps.
Page DownDecreases slider value multiple steps. In this slider, jumps ten steps.
HomeSets slider to its minimum value.
EndSets slider to its maximum value.
+
+ +
+

Role, Property, State, and Tabindex Attributes

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
RoleAttributeElementUsage
+ slider + + div + +
    +
  • Identifies the element as a slider.
    • +
  • Set on the div that represents as the movable thumb because it is the operable element that represents the slider value.
    • +
+
+ tabindex=0 + + div + Includes the slider thumb in the page tab sequence.
+ aria-valuemax=270 + + div + Specifies the maximum value of the slider.
+ aria-valuemin=0 + + div + Specifies the minimum value of the slider.
+ aria-valuenow=NUMBER + + div + Indicates the current value of the slider.
+ aria-labelledby=IDREF + + div + Refers to the element containing the name of the slider.
+ aria-controls=IDREF + + div + Provides a reference to the other slider to change the aria-valuemin or aria-valuemax of the referenced slider.
+
+
+

Javascript and CSS Source Code

+ +
+ +
+

HTML Source Code

+ +
+ + +
+ +
+ + + From 7445ca6a1ab7bcdc4c6d666ba26e25147213cff2 Mon Sep 17 00:00:00 2001 From: Jon Gunderson Date: Fri, 14 Jul 2017 14:58:28 -0500 Subject: [PATCH 02/11] fixed reference in footer --- examples/slider/multithumb-slider.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/examples/slider/multithumb-slider.html b/examples/slider/multithumb-slider.html index 384c6b43e5..1fc85a11c2 100644 --- a/examples/slider/multithumb-slider.html +++ b/examples/slider/multithumb-slider.html @@ -219,7 +219,7 @@

HTML Source Code

From df56dd9c9cecdc281a90e6f63d907657337cff34 Mon Sep 17 00:00:00 2001 From: Jon Gunderson Date: Mon, 17 Jul 2017 12:58:48 -0500 Subject: [PATCH 03/11] Made updates based on ARIA authoring practices call feedback --- examples/slider/js/multithumb-slider.js | 17 +++++++++-------- examples/slider/multithumb-slider.html | 25 ++++++++++++------------- 2 files changed, 21 insertions(+), 21 deletions(-) diff --git a/examples/slider/js/multithumb-slider.js b/examples/slider/js/multithumb-slider.js index ea065796d0..88f8bf639d 100644 --- a/examples/slider/js/multithumb-slider.js +++ b/examples/slider/js/multithumb-slider.js @@ -12,7 +12,7 @@ var Slider = function (domNode) { this.domNode = domNode; this.railDomNode = domNode.parentNode; - this.valueDomNode = false; + this.labelDomNode = false; this.minDomNode = false; this.maxDomNode = false; @@ -61,11 +61,11 @@ Slider.prototype.init = function () { this.railWidth = parseInt(this.railDomNode.style.width.slice(0, -2)); - this.valueDomNode = document.getElementById(this.domNode.getAttribute('aria-controls')); + this.labelDomNode = document.getElementById(this.domNode.getAttribute('id') + 'Label'); - if (this.valueDomNode) { - this.valueDomNode.innerHTML = '0'; - this.valueDomNode.style.top = (this.railDomNode.offsetTop - 8) + 'px'; + if (this.labelDomNode) { + this.labelDomNode.innerHTML = '0'; + this.labelDomNode.style.top = (this.railDomNode.offsetTop - 8) + 'px'; } if (this.domNode.tabIndex != 0) { @@ -102,6 +102,7 @@ Slider.prototype.moveSliderTo = function (value) { this.dolValueNow = "$" + value; this.domNode.setAttribute('aria-valuenow', this.valueNow); + this.domNode.setAttribute('aria-valuetext', this.dolValueNow); if (this.minDomNode) { this.minDomNode.setAttribute('aria-valuemax', this.valueNow); @@ -117,9 +118,9 @@ Slider.prototype.moveSliderTo = function (value) { this.domNode.style.left = pos + 'px'; - if (this.valueDomNode) { - this.valueDomNode.innerHTML = this.dolValueNow.toString(); - this.valueDomNode.style.left = (this.railDomNode.offsetLeft + this.railWidth + 10) + 'px'; + if (this.labelDomNode) { + this.labelDomNode.innerHTML = this.dolValueNow.toString(); + this.labelDomNode.style.left = (this.railDomNode.offsetLeft + this.railWidth + 10) + 'px'; } }; diff --git a/examples/slider/multithumb-slider.html b/examples/slider/multithumb-slider.html index 1fc85a11c2..154634944e 100644 --- a/examples/slider/multithumb-slider.html +++ b/examples/slider/multithumb-slider.html @@ -29,11 +29,11 @@

Horizontal Multi-Thumb Slider Example

  • Horizontal Slider Examples: - Demonstrates using three horizontally aligned sliders to make a color picker. + Demonstrates using three horizontally aligned single-thumb sliders to make a color picker.
  • Slider Examples with aria-orientation and aria-valuetext: - Three thermostat control sliders that demonstrate using aria-orientation and aria-valuetext. + Three thermostat control single-thumb sliders that demonstrate using aria-orientation and aria-valuetext.
@@ -41,19 +41,18 @@

Example

-
Minimum Hotel Price: $0
-
Maximum Hotel Price: $270
+

Select Price Range

0

0

-
- +
+ - +
@@ -178,22 +177,22 @@

Role, Property, State, and Tabindex Attributes

- aria-labelledby=IDREF + aria-valuetext=DOLLAR AMOUNT div - Refers to the element containing the name of the slider. + Indicates the current value of the slider in dollars using the $ character as a prefix. - aria-controls=IDREF + aria-label=text div - Provides a reference to the other slider to change the aria-valuemin or aria-valuemax of the referenced slider. + A label identifying the function of the slider, in this case "Minimum Price" or "Maximum Price". From 04b355ec72416e7ccb5978297c40175377d8c407 Mon Sep 17 00:00:00 2001 From: Jon Gunderson Date: Wed, 19 Jul 2017 14:07:50 -0500 Subject: [PATCH 04/11] removed uneeded selector --- examples/slider/css/multithumb-slider.css | 5 ----- 1 file changed, 5 deletions(-) diff --git a/examples/slider/css/multithumb-slider.css b/examples/slider/css/multithumb-slider.css index 13a1f6e01e..efea139ae0 100644 --- a/examples/slider/css/multithumb-slider.css +++ b/examples/slider/css/multithumb-slider.css @@ -33,13 +33,8 @@ div.aria-widget-slider .rail { height: 4px; } -div.aria-widget-slider .max { - position: relative; -} - div.aria-widget-slider .thumb { position: absolute; - width: 16px; } div.aria-widget-slider .rail .thumb.focus, From 6ff7c74ae4d991d3a0be57d216183a1c1d613add Mon Sep 17 00:00:00 2001 From: Jon Gunderson Date: Wed, 26 Jul 2017 16:36:45 -0500 Subject: [PATCH 05/11] updated slider examples --- examples/slider/css/multithumb-slider.css | 2 +- examples/slider/multithumb-slider.html | 68 ++++++++++++++++++++--- 2 files changed, 60 insertions(+), 10 deletions(-) diff --git a/examples/slider/css/multithumb-slider.css b/examples/slider/css/multithumb-slider.css index efea139ae0..9c409960ce 100644 --- a/examples/slider/css/multithumb-slider.css +++ b/examples/slider/css/multithumb-slider.css @@ -4,7 +4,7 @@ div.rail-label { position: absolute; } -div.rail-label p { +div.rail-label span { margin-top: 1.5em; } diff --git a/examples/slider/multithumb-slider.html b/examples/slider/multithumb-slider.html index 154634944e..00b930fa4d 100644 --- a/examples/slider/multithumb-slider.html +++ b/examples/slider/multithumb-slider.html @@ -42,21 +42,71 @@

Example

-

Select Price Range

+

Hotel Price Range

-

0

-

0

+
+ 0 +
+
+ 0 +
- - - - + +
+ +

Flight Price Range

+ +
+
+ 0 +
+
+ + +
+
+ 0 +
+
+
+
From 12237b4a1d3191844cf99ada2c8dad2e9e001e99 Mon Sep 17 00:00:00 2001 From: Jon Gunderson Date: Fri, 28 Jul 2017 16:19:12 -0500 Subject: [PATCH 06/11] updated slider --- examples/slider/css/multithumb-slider.css | 45 +++++--------- examples/slider/images/max-arrow-2.png | Bin 0 -> 282 bytes examples/slider/images/max-arrow.paint | Bin 0 -> 11004 bytes examples/slider/images/max-arrow.png | Bin 0 -> 747 bytes examples/slider/images/max-arrow.svg | 1 + examples/slider/images/min-arow.svg | 1 + examples/slider/images/min-arrow-2.png | Bin 0 -> 716 bytes examples/slider/images/min-arrow.png | Bin 0 -> 318 bytes examples/slider/images/min-arrow.svg | 1 + examples/slider/js/multithumb-slider.js | 30 ++++----- examples/slider/multithumb-slider.html | 71 +++++++++++----------- 11 files changed, 68 insertions(+), 81 deletions(-) create mode 100644 examples/slider/images/max-arrow-2.png create mode 100644 examples/slider/images/max-arrow.paint create mode 100644 examples/slider/images/max-arrow.png create mode 100644 examples/slider/images/max-arrow.svg create mode 100644 examples/slider/images/min-arow.svg create mode 100644 examples/slider/images/min-arrow-2.png create mode 100644 examples/slider/images/min-arrow.png create mode 100644 examples/slider/images/min-arrow.svg diff --git a/examples/slider/css/multithumb-slider.css b/examples/slider/css/multithumb-slider.css index 9c409960ce..b1d5f31888 100644 --- a/examples/slider/css/multithumb-slider.css +++ b/examples/slider/css/multithumb-slider.css @@ -1,36 +1,31 @@ /* CSS Document */ -div.rail-label { - position: absolute; -} - -div.rail-label span { - margin-top: 1.5em; -} - -div.rail-label .dol #minPriceLabel { - text-align: left; +div.aria-widget-slider { + clear: both; + padding-top: 0.5em; + padding-bottom: 1em; } -div.rail-label #maxPriceLabel { - margin-left: 23em; +div.rail-label { + padding-right: 0.5em; + text-align: right; + float: left; + width: 4em; + position: relative; + top: -0.5em; } -div.aria-widget-slider { - margin-top: 0.5em; - margin-bottom: 0.5em; - height: 4em; +div.rail-label.max { + padding-left: 0.5em; + text-align: left; } div.aria-widget-slider .rail { - margin: 2px; - margin-left: 50px; - padding: 1px; background-color: #eee; border: 1px solid #888; position: relative; - top: 2em; height: 4px; + float: left; } div.aria-widget-slider .thumb { @@ -46,14 +41,4 @@ div.aria-widget-slider .rail.focus { background-color: #AAA; } -div.aria-widget-slider .value { - width: 2em; - text-align: right; - position: absolute; -} -label { - display: block; - margin-top: 0.5em; - margin-bottom: 0.5em; -} diff --git a/examples/slider/images/max-arrow-2.png b/examples/slider/images/max-arrow-2.png new file mode 100644 index 0000000000000000000000000000000000000000..719e979a03d3c429411a6cc41c751a7fb370c5e1 GIT binary patch literal 282 zcmeAS@N?(olHy`uVBq!ia0vp^3LwnE1|*BCs=fdzmSQK*5Dp-y;YjHK@;M7UB8wRq zxP?KOkzv*x383H}PZ!6Kh}O54*Jm9HlsWb=oh?$NM@dJAzwIRVhBrn&_u6x}C*Jmz zkkOIwQCqBVXp)5JR*jC1`U9VTE6w4bQ}&?tLBWZqMg4301pg@=vo}0kR?qd8`}E?E zPK>f^{Eu-n?s@S0Oo3uU_@5XFf36jezMrZvI$*74-lNWF^0EGLh0uYI^7Rr6O4t*M zkKa`>H4y*7@}aFzg+c3uJJW)mIF$zh=28r~Ym^u-98wZuke}hkw4hCqEwCZx-OpQ$ YipGs4mztMq0{y|@>FVdQ&MBb@0MAxsIRF3v literal 0 HcmV?d00001 diff --git a/examples/slider/images/max-arrow.paint b/examples/slider/images/max-arrow.paint new file mode 100644 index 0000000000000000000000000000000000000000..232fa40aaad5cf512189912b7ea1120c8e0d7bb8 GIT binary patch literal 11004 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 literal 0 HcmV?d00001 diff --git a/examples/slider/images/max-arrow.png b/examples/slider/images/max-arrow.png new file mode 100644 index 0000000000000000000000000000000000000000..47ec355fdc113324be5f2c5611ad3ea55fd26864 GIT binary patch literal 747 zcmeAS@N?(olHy`uVBq!ia0vp^3LwnE1|*BCs=fdz#^NA%Cx&(BWL^R}oCO|{#S9GG z!XV7ZFl&wkP(fs7NJL45ua8x7ey(0(N`6wRUPW#JP&EUCO@$SZnVVXYs8ErclUHn2 zVXFjIVFhG^g!Ppaz)DK8ZIvQ?0~DO|i&7O#^-S~(l1AfjnEK zjFOT9D}DX)@^Za$W4-*MbbUihOG|wNBYh(yU7!lx;>x^|#0uTKVr7USFmqf|i<65o z3raHc^AtelCMM;Vme?vOfh>Xph&xL%(-1c06+^uR^q@XSM&D4+Kp$>4P^%3{)XKjo zGZknv$b36P8?Z_gF{nK@`XI}Z90TzwSQO}0J1!f2c(B=V`5aP@1O~FUr;B4q1ZQ%B z1nXi&hus1Rj8d^2NAepgOy90Kn72te;0Kq$fA>Q-LW3ehq%!Vtsd&G9#$dK!=~IV4 ztnE(~+Ar|zVD{a|dE~^tqsNx*Vt&%7wods_(v0L4&lva?c$PZ+>18?X*tdY|1M93J z@s7lOO0COIFrIR_8+~Gn#50dgG6z_%T;(}pud!v$8Vv?fHU5FVdQ&MBb@0Oj=kZ~y=R literal 0 HcmV?d00001 diff --git a/examples/slider/images/max-arrow.svg b/examples/slider/images/max-arrow.svg new file mode 100644 index 0000000000..f0383f7577 --- /dev/null +++ b/examples/slider/images/max-arrow.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/examples/slider/images/min-arow.svg b/examples/slider/images/min-arow.svg new file mode 100644 index 0000000000..c54977e8b1 --- /dev/null +++ b/examples/slider/images/min-arow.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/examples/slider/images/min-arrow-2.png b/examples/slider/images/min-arrow-2.png new file mode 100644 index 0000000000000000000000000000000000000000..fcce60b1de73bf244298bbd646b6ce1aca90090b GIT binary patch literal 716 zcmeAS@N?(olHy`uVBq!ia0vp^3LwnE1|*BCs=fdz#^NA%Cx&(BWL^R}oCO|{#S9GG z!XV7ZFl&wkP(fs7NJL45ua8x7ey(0(N`6wRUPW#JP&EUCO@$SZnVVXYs8ErclUHn2 zVXFjIVFhG^g!Ppaz)DK8ZIvQ?0~DO|i&7O#^-S~(l1AfjnEK zjFOT9D}DX)@^Za$W4-*MbbUihOG|wNBYh(yU7!lx;>x^|#0uTKVr7USFmqf|i<65o z3raHc^AtelCMM;Vme?vOfh>Xph&xL%(-1c06+^uR^q@XSM&D4+Kp$>4P^%3{)XKjo zGZknv$b36P8?Z_gF{nK@`XI}Z90TzwSQO}0J1!f2c(B=V`5aP@1O_sXr;B4q1ZQ%B z1nXi&11Y8>?FSMUT)OO_L>j*MA4ez z$UojAo>z?LZSZ`-*YI&RXZF%Qt{JU2UL1AMzOf>iH!pZYWRK1^`4yoI+sjU+PS8Dk zbRX9ix5lE?8)i404l4O5?(p{5jot-5B6pQ){-_^`I_k27HIh&_izzT_*jPo1QDg!g*PTor7t6;m5>9HwKE5m}%7ava i0+rpI6HHhhC^9f8Gd7f&r7i=dR|Zd4KbLh*2~7Zd2JP$s literal 0 HcmV?d00001 diff --git a/examples/slider/images/min-arrow.png b/examples/slider/images/min-arrow.png new file mode 100644 index 0000000000000000000000000000000000000000..338ce3efb88acd15dcb7fa75aff1c1d6ff468ea6 GIT binary patch literal 318 zcmeAS@N?(olHy`uVBq!ia0vp^3LwnE1|*BCs=fdzmSQK*5Dp-y;YjHK@;M7UB8wRq zxP?KOkzv*x383HuPZ!6Kh}O5)Y`vTvCEOmiD;%4z8nHy+PP@WJ!(MAoQR&>Am@b8= zn>+eV7+ITJdqXD(toAfbm?$u(I)C4x--k5Yi&yn8jNSdU`Up?>jb09q{WBKGOHQbC z(l=5_?8`1$%w)8FM+eUdo5vPFfyU@J?yM>I3MGLm4tl0I9O8dhAR#*8=YdEd`?;0p z@+E5$R(=VT^(mARoRELmv2#zBgYNZ>E`Qn_Lkm3*$e7<)?fq|h!?AxHvyTYRF;~1N z@}YO4?jPaslkW?!Y^ex65b@A(bP0 Hl+XkK{2+Sx literal 0 HcmV?d00001 diff --git a/examples/slider/images/min-arrow.svg b/examples/slider/images/min-arrow.svg new file mode 100644 index 0000000000..c54977e8b1 --- /dev/null +++ b/examples/slider/images/min-arrow.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/examples/slider/js/multithumb-slider.js b/examples/slider/js/multithumb-slider.js index 88f8bf639d..3da90780e0 100644 --- a/examples/slider/js/multithumb-slider.js +++ b/examples/slider/js/multithumb-slider.js @@ -22,8 +22,8 @@ var Slider = function (domNode) { this.railMax = 100; this.railWidth = 0; - this.thumbWidth = 16; - this.thumbHeight = 28; + this.thumbWidth = 32; + this.thumbHeight = 32; this.keyCode = Object.freeze({ 'left' : 37, @@ -61,23 +61,22 @@ Slider.prototype.init = function () { this.railWidth = parseInt(this.railDomNode.style.width.slice(0, -2)); - this.labelDomNode = document.getElementById(this.domNode.getAttribute('id') + 'Label'); + if (this.domNode.classList.contains('min')) { + this.labelDomNode = this.domNode.parentElement.previousElementSibling; + } - if (this.labelDomNode) { - this.labelDomNode.innerHTML = '0'; - this.labelDomNode.style.top = (this.railDomNode.offsetTop - 8) + 'px'; + if (this.domNode.classList.contains('max')) { + this.labelDomNode = this.domNode.parentElement.nextElementSibling; } if (this.domNode.tabIndex != 0) { this.domNode.tabIndex = 0; } - //this.domNode.style.width = this.thumbWidth + 'px'; + this.domNode.style.top = '-14px'; this.domNode.style.height = this.thumbHeight + 'px'; - //this.domNode.style.top = ((this.thumbHeight / -2) - 15) + 'px'; this.domNode.addEventListener('keydown', this.handleKeyDown.bind(this)); - // add onmousedown, move, and onmouseup this.domNode.addEventListener('mousedown', this.handleMouseDown.bind(this)); this.domNode.addEventListener('focus', this.handleFocus.bind(this)); this.domNode.addEventListener('blur', this.handleBlur.bind(this)); @@ -113,15 +112,18 @@ Slider.prototype.moveSliderTo = function (value) { } var pos = Math.round( - ((this.valueNow - this.railMin) * this.railWidth) / (this.railMax - this.railMin) - ) - (this.thumbWidth / 2); + ((this.valueNow - this.railMin) * (this.railWidth - this.thumbWidth)) / (this.railMax - this.railMin)); - this.domNode.style.left = pos + 'px'; + if (this.minDomNode) { + this.domNode.style.left = (pos + 7) + 'px'; + } + else { + this.domNode.style.left = (pos - 7) + 'px'; + } if (this.labelDomNode) { this.labelDomNode.innerHTML = this.dolValueNow.toString(); - this.labelDomNode.style.left = (this.railDomNode.offsetLeft + this.railWidth + 10) + 'px'; - } + } }; Slider.prototype.handleKeyDown = function (event) { diff --git a/examples/slider/multithumb-slider.html b/examples/slider/multithumb-slider.html index 00b930fa4d..92ac5d0680 100644 --- a/examples/slider/multithumb-slider.html +++ b/examples/slider/multithumb-slider.html @@ -40,20 +40,16 @@

Horizontal Multi-Thumb Slider Example

Example

-

Hotel Price Range

-
- 0 -
-
- 0 +
+ 0
-
+
Hotel Price Range aria-valuenow="100" aria-valuetext="$100" aria-valuemax="400" - aria-label="Hotel Minimim Price"> + aria-label="Hotel Minimim Price"/> Hotel Price Range aria-valuenow="250" aria-valuenow="$250" aria-valuemax="400" - aria-label="Hotel Maximum Price"> + aria-label="Hotel Maximum Price"/> +
+
+ 0
-

Flight Price Range

-
- 0 -
-
- - + 0 +
+
+ -
-
- 0 -
+ aria-valuenow="100" + aria-valuetext="$100" + aria-valuemax="250" + aria-label="Flight Minimim Price"> + +
+
+ 0 +
-
From 7e88cd2af1f45c96fe2ac9dcd61f1e92a222d9bd Mon Sep 17 00:00:00 2001 From: Jon Gunderson Date: Sat, 29 Jul 2017 12:55:12 -0500 Subject: [PATCH 07/11] updated pointers --- examples/slider/css/multithumb-slider.css | 15 +++++++++++---- examples/slider/images/max-arrow.png | Bin 747 -> 1369 bytes examples/slider/images/min-arrow.png | Bin 318 -> 1381 bytes examples/slider/js/multithumb-slider.js | 15 ++++++--------- 4 files changed, 17 insertions(+), 13 deletions(-) diff --git a/examples/slider/css/multithumb-slider.css b/examples/slider/css/multithumb-slider.css index b1d5f31888..cdc16f1205 100644 --- a/examples/slider/css/multithumb-slider.css +++ b/examples/slider/css/multithumb-slider.css @@ -6,6 +6,7 @@ div.aria-widget-slider { padding-bottom: 1em; } + div.rail-label { padding-right: 0.5em; text-align: right; @@ -28,13 +29,19 @@ div.aria-widget-slider .rail { float: left; } -div.aria-widget-slider .thumb { +div.aria-widget-slider img[role="slider"] { position: absolute; + padding: 0; + margin: 0; + top: -10px; } -div.aria-widget-slider .rail .thumb.focus, -div.aria-widget-slider .rail .thumb:hover { - outline: 2px solid #888; +div.aria-widget-slider img[role="slider"].focus, +div.aria-widget-slider img[role="slider"]:hover { + outline-color: #888; + outline-style: solid; + outline-width: 2px; + outline-offset: 2px; } div.aria-widget-slider .rail.focus { diff --git a/examples/slider/images/max-arrow.png b/examples/slider/images/max-arrow.png index 47ec355fdc113324be5f2c5611ad3ea55fd26864..0cdb3cae945109efc6612b8284c7b29bde3bb7d0 100644 GIT binary patch literal 1369 zcmV-f1*ZCmP)4Tx062|}Rb6NtRTMtEb7vzY&QokOg>Hg1+lHrgWS zWcKdPn90sKGrRqvPeo9CG3uKX#J{(IASm?@+di}}l?o-=)F3E6wD^Ni=!>T7nL9I? zX}YoAW$t|Qo$sD|?zw001?ah|SeB6#0T!CBEf+H4bBB+JJu8rehoBb*p;u8ID_yBf z0ya+zcePvJL&AGs+11_tpRKn>9TgyPA7ZoSs0)aX0r00)%XR^J`jH<$>RKN5V(7Oq zK*TS4xZz{h!*f1C3ECFkK$#7nA@pGN!$;%jYvwjAKwmYb0gKL(K8 z-kPtb5${A?tlI~wzMrJ6wTdBr=Y%%%EaEMQ&o}4FQ^DA)s*}Z>!FI&AHCpoWI|RUq zx?7s@$8!5^Q=anY%X@i5{QA6kNcMelpE>R6eCYFpmMsVTrI(b06~u#xf1yS} z_UGdMvD``!0~u->P=lA4?YN`hilQ|3tHka)7T{2CGqw zjZfMwx$5irQN_*|e4l)UHmiYuz74Yp1t^#>hrJ3-SOXDcC_o0^7T9R1gAN8V6s;5) zieI5-7aQlmJn}lUna#nz!j%5V$X|o`xX!dHWQRV27P1=rj;t2bW$~+pTw@bIek?Zv zKPDL<64`^#UNTAck#RBsB6*5DP4<%UA_FqU$I>2EH_cM;u)Q~SI+rg`Rn{L_AC5qq~L$#SMj%U z$6Cz0vP{G5Y*=%5RT^yu;}-DInZ=349rJPVM6C3K^oO)8y(fJr{l>k`ead~!ea?NsT>_Ci%bnxC;Vy6=b6>{xYV#Ue-+LB$ z7`JEXmTRm^AtP)R9u{)KHsMiWGV&)32xCG~*nyU<>-!d;FP=Re4r3qYr~6#KE>;1F z`>_J_P5xC?ROxV(DIHdCO*p$HRQI@7^PwV@Pvuf+5K}u-6REM(K@W$s zrgorh0{i?O)v0c>QtHxU-hBdD(>iYJ4b2sIOVX2K8m~4gmYVA5h^QEb$V`rCQ-|7Z zS{nuL-t>?3n=-o(6I(7vocj#GzCZEo`!3>+v;dYIfPu#&ZWzzX2i^rZ^Mu;6+rb@? zNPG+6)c5T6zxpzGe*M(x+{AON=PiJ>H#?ob-|uwRK0yDg0B4PV0id6JRZw95ZvX%R z2T4RhR5%f>l|2f=Fc?5p#NQ)0bP&9UAiC({O`LSm#l@otqLYjFa1j&~!O2NPbgHj~ zNGeIwCJns&efeI~(x$nbdnuwA!5vnvx;BD6_!3sm23bo_kCg|I zccbbXg&r$52}DA!6;_DM;FUraNR?&4>1AfjnEK zjFOT9D}DX)@^Za$W4-*MbbUihOG|wNBYh(yU7!lx;>x^|#0uTKVr7USFmqf|i<65o z3raHc^AtelCMM;Vme?vOfh>Xph&xL%(-1c06+^uR^q@XSM&D4+Kp$>4P^%3{)XKjo zGZknv$b36P8?Z_gF{nK@`XI}Z90TzwSQO}0J1!f2c(B=V`5aP@1O~FUr;B4q1ZQ%B z1nXi&hus1Rj8d^2NAepgOy90Kn72te;0Kq$fA>Q-LW3ehq%!Vtsd&G9#$dK!=~IV4 ztnE(~+Ar|zVD{a|dE~^tqsNx*Vt&%7wods_(v0L4&lva?c$PZ+>18?X*tdY|1M93J z@s7lOO0COIFrIR_8+~Gn#50dgG6z_%T;(}pud!v$8Vv?fHU5FVdQ&MBb@0Oj=kZ~y=R diff --git a/examples/slider/images/min-arrow.png b/examples/slider/images/min-arrow.png index 338ce3efb88acd15dcb7fa75aff1c1d6ff468ea6..7b74914700135a84d95bdd84d6d630e00d4df6e2 100644 GIT binary patch literal 1381 zcmV-r1)BPaP)4Tx062|}Rb6NtRTMtEb7vzY&QokOg>Hg1+lHrgWS zWcKdPn90sKGrRqvPeo9CG3uKX#J{(IASm?@+di}}l?o-=)F3E6wD^Ni=!>T7nL9I? zX}YoAW$t|Qo$sD|?zw001?ah|SeB6#0T!CBEf+H4bBB+JJu8rehoBb*p;u8ID_yBf z0ya+zcePvJL&AGs+11_tpRKn>9TgyPA7ZoSs0)aX0r00)%XR^J`jH<$>RKN5V(7Oq zK*TS4xZz{h!*f1C3ECFkK$#7nA@pGN!$;%jYvwjAKwmYb0gKL(K8 z-kPtb5${A?tlI~wzMrJ6wTdBr=Y%%%EaEMQ&o}4FQ^DA)s*}Z>!FI&AHCpoWI|RUq zx?7s@$8!5^Q=anY%X@i5{QA6kNcMelpE>R6eCYFpmMsVTrI(b06~u#xf1yS} z_UGdMvD``!0~u->P=lA4?YN`hilQ|3tHka)7T{2CGqw zjZfMwx$5irQN_*|e4l)UHmiYuz74Yp1t^#>hrJ3-SOXDcC_o0^7T9R1gAN8V6s;5) zieI5-7aQlmJn}lUna#nz!j%5V$X|o`xX!dHWQRV27P1=rj;t2bW$~+pTw@bIek?Zv zKPDL<64`^#UNTAck#RBsB6*5DP4<%UA_FqU$I>2EH_cM;u)Q~SI+rg`Rn{L_AC5qq~L$#SMj%U z$6Cz0vP{G5Y*=%5RT^yu;}-DInZ=349rJPVM6C3K^oO)8y(fJr{l>k`ead~!ea?NsT>_Ci%bnxC;Vy6=b6>{xYV#Ue-+LB$ z7`JEXmTRm^AtP)R9u{)KHsMiWGV&)32xCG~*nyU<>-!d;FP=Re4r3qYr~6#KE>;1F z`>_J_P5xC?ROxV(DIHdCO*p$HRQI@7^PwV@Pvuf+5K}u-6REM(K@W$s zrgorh0{i?O)v0c>QtHxU-hBdD(>iYJ4b2sIOVX2K8m~4gmYVA5h^QEb$V`rCQ-|7Z zS{nuL-t>?3n=-o(6I(7vocj#GzCZEo`!3>+v;dYIfPu#&ZWzzX2i^rZ^Mu;6+rb@? zNPG+6)c5T6zxpzGe*M(x+{AON=PiJ>H#?ob-|uwRK0yDg0B4PV0id6JRZw95ZvX%R z6G=otR5%f>l|2dqF%X5Lh`&d$un@e5Alhi-O{}!h#>S%vqLq#Jun`m#8w)ED(Mn&I z9T-BA$+{bOn`CC*$1G&CN-4F59?%3TLaE0W1kwTPZdxM2_`CtM@h_Nz`1%Fl6e=YJ zbBJwy1hAh3YJ=EfTR@v3V4K+$djmL!Dn78w?2DfP9J-)Bqmi!TtGDf zONP+=6~Imo4{gY5-11qGVouat=qpKe7eLz@EEP(5I-AwF%Tz$?*CTac%b(EAfI2c~ zo52;+H_!|!n-IQtnaz0c9cdcPy}reJyaQ=%0%-q)aSSE?&k%smOMvQ9C$2mP?NJmR nPFHbAe1)PrG=d5t24Bq&Nqz4~1k)!{00000NkvXXu0mjf*%O&M literal 318 zcmeAS@N?(olHy`uVBq!ia0vp^3LwnE1|*BCs=fdzmSQK*5Dp-y;YjHK@;M7UB8wRq zxP?KOkzv*x383HuPZ!6Kh}O5)Y`vTvCEOmiD;%4z8nHy+PP@WJ!(MAoQR&>Am@b8= zn>+eV7+ITJdqXD(toAfbm?$u(I)C4x--k5Yi&yn8jNSdU`Up?>jb09q{WBKGOHQbC z(l=5_?8`1$%w)8FM+eUdo5vPFfyU@J?yM>I3MGLm4tl0I9O8dhAR#*8=YdEd`?;0p z@+E5$R(=VT^(mARoRELmv2#zBgYNZ>E`Qn_Lkm3*$e7<)?fq|h!?AxHvyTYRF;~1N z@}YO4?jPaslkW?!Y^ex65b@A(bP0 Hl+XkK{2+Sx diff --git a/examples/slider/js/multithumb-slider.js b/examples/slider/js/multithumb-slider.js index 3da90780e0..52298b28cd 100644 --- a/examples/slider/js/multithumb-slider.js +++ b/examples/slider/js/multithumb-slider.js @@ -22,8 +22,8 @@ var Slider = function (domNode) { this.railMax = 100; this.railWidth = 0; - this.thumbWidth = 32; - this.thumbHeight = 32; + this.thumbWidth = 20; + this.thumbHeight = 24; this.keyCode = Object.freeze({ 'left' : 37, @@ -32,7 +32,7 @@ var Slider = function (domNode) { 'down' : 40, 'pageUp' : 33, 'pageDown' : 34, - 'end' : 35, + 'end' : 35, 'home' : 36 }); }; @@ -73,9 +73,6 @@ Slider.prototype.init = function () { this.domNode.tabIndex = 0; } - this.domNode.style.top = '-14px'; - this.domNode.style.height = this.thumbHeight + 'px'; - this.domNode.addEventListener('keydown', this.handleKeyDown.bind(this)); this.domNode.addEventListener('mousedown', this.handleMouseDown.bind(this)); this.domNode.addEventListener('focus', this.handleFocus.bind(this)); @@ -112,13 +109,13 @@ Slider.prototype.moveSliderTo = function (value) { } var pos = Math.round( - ((this.valueNow - this.railMin) * (this.railWidth - this.thumbWidth)) / (this.railMax - this.railMin)); + ((this.valueNow - this.railMin) * (this.railWidth - 2 * this.thumbWidth + 2)) / (this.railMax - this.railMin)); if (this.minDomNode) { - this.domNode.style.left = (pos + 7) + 'px'; + this.domNode.style.left = (pos + this.thumbWidth - 1) + 'px'; } else { - this.domNode.style.left = (pos - 7) + 'px'; + this.domNode.style.left = (pos - 1) + 'px'; } if (this.labelDomNode) { From e854e7b00d22015a0910011225b5c1b95b4f3798 Mon Sep 17 00:00:00 2001 From: Jon Gunderson Date: Sat, 29 Jul 2017 12:58:38 -0500 Subject: [PATCH 08/11] updated pointers --- examples/slider/css/multithumb-slider.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/examples/slider/css/multithumb-slider.css b/examples/slider/css/multithumb-slider.css index cdc16f1205..c62621ecdd 100644 --- a/examples/slider/css/multithumb-slider.css +++ b/examples/slider/css/multithumb-slider.css @@ -38,7 +38,7 @@ div.aria-widget-slider img[role="slider"] { div.aria-widget-slider img[role="slider"].focus, div.aria-widget-slider img[role="slider"]:hover { - outline-color: #888; + outline-color: rgb(140, 203, 242); outline-style: solid; outline-width: 2px; outline-offset: 2px; From 8899ed794d181053d4f2d558197e57e4cf60fa72 Mon Sep 17 00:00:00 2001 From: Jon Gunderson Date: Sat, 29 Jul 2017 13:02:00 -0500 Subject: [PATCH 09/11] updated pointers --- examples/slider/css/multithumb-slider.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/examples/slider/css/multithumb-slider.css b/examples/slider/css/multithumb-slider.css index c62621ecdd..0a556a45ac 100644 --- a/examples/slider/css/multithumb-slider.css +++ b/examples/slider/css/multithumb-slider.css @@ -45,7 +45,7 @@ div.aria-widget-slider img[role="slider"]:hover { } div.aria-widget-slider .rail.focus { - background-color: #AAA; + background-color: #aaa; } From 4dfcecf8274b0df3dae2c33e8374b622b658d02c Mon Sep 17 00:00:00 2001 From: Jon Gunderson Date: Mon, 31 Jul 2017 12:50:26 -0500 Subject: [PATCH 10/11] saved changes --- examples/slider/js/multithumb-slider.js | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/examples/slider/js/multithumb-slider.js b/examples/slider/js/multithumb-slider.js index 52298b28cd..e9cb32a9e1 100644 --- a/examples/slider/js/multithumb-slider.js +++ b/examples/slider/js/multithumb-slider.js @@ -21,6 +21,7 @@ var Slider = function (domNode) { this.railMin = 0; this.railMax = 100; this.railWidth = 0; + this.railBorderWidth = 1; this.thumbWidth = 20; this.thumbHeight = 24; @@ -108,14 +109,13 @@ Slider.prototype.moveSliderTo = function (value) { this.maxDomNode.setAttribute('aria-valuemin', this.valueNow); } - var pos = Math.round( - ((this.valueNow - this.railMin) * (this.railWidth - 2 * this.thumbWidth + 2)) / (this.railMax - this.railMin)); + var pos = Math.round(((this.valueNow - this.railMin) * (this.railWidth - 2 * (this.thumbWidth - this.railBorderWidth))) / (this.railMax - this.railMin)); if (this.minDomNode) { - this.domNode.style.left = (pos + this.thumbWidth - 1) + 'px'; + this.domNode.style.left = (pos + this.thumbWidth - this.railBorderWidth) + 'px'; } else { - this.domNode.style.left = (pos - 1) + 'px'; + this.domNode.style.left = (pos - this.railBorderWidth) + 'px'; } if (this.labelDomNode) { From c9d00e1b8d8e99d5e7349b90f42a1cdb80dae845 Mon Sep 17 00:00:00 2001 From: Matt King Date: Mon, 28 Aug 2017 02:14:09 -0700 Subject: [PATCH 11/11] Multi-Thumb Slider Example: Fix ESLint Errors --- examples/slider/js/multithumb-slider.js | 66 ++++++++++++------------- 1 file changed, 33 insertions(+), 33 deletions(-) diff --git a/examples/slider/js/multithumb-slider.js b/examples/slider/js/multithumb-slider.js index e9cb32a9e1..643b0884b3 100644 --- a/examples/slider/js/multithumb-slider.js +++ b/examples/slider/js/multithumb-slider.js @@ -27,21 +27,21 @@ var Slider = function (domNode) { this.thumbHeight = 24; this.keyCode = Object.freeze({ - 'left' : 37, - 'up' : 38, - 'right' : 39, - 'down' : 40, - 'pageUp' : 33, - 'pageDown' : 34, - 'end' : 35, - 'home' : 36 + 'left': 37, + 'up': 38, + 'right': 39, + 'down': 40, + 'pageUp': 33, + 'pageDown': 34, + 'end': 35, + 'home': 36 }); }; // Initialize slider Slider.prototype.init = function () { - if(this.domNode.previousElementSibling) { + if (this.domNode.previousElementSibling) { this.minDomNode = this.domNode.previousElementSibling; this.railMin = parseInt((this.minDomNode.getAttribute('aria-valuemin'))); } @@ -96,7 +96,7 @@ Slider.prototype.moveSliderTo = function (value) { } this.valueNow = value; - this.dolValueNow = "$" + value; + this.dolValueNow = '$' + value; this.domNode.setAttribute('aria-valuenow', this.valueNow); this.domNode.setAttribute('aria-valuetext', this.dolValueNow); @@ -115,7 +115,7 @@ Slider.prototype.moveSliderTo = function (value) { this.domNode.style.left = (pos + this.thumbWidth - this.railBorderWidth) + 'px'; } else { - this.domNode.style.left = (pos - this.railBorderWidth) + 'px'; + this.domNode.style.left = (pos - this.railBorderWidth) + 'px'; } if (this.labelDomNode) { @@ -183,41 +183,41 @@ Slider.prototype.handleBlur = function (event) { Slider.prototype.handleMouseDown = function (event) { - var self = this; + var self = this; - var handleMouseMove = function (event) { + var handleMouseMove = function (event) { - var diffX = event.pageX - self.railDomNode.offsetLeft; - self.valueNow = self.railMin + parseInt(((self.railMax - self.railMin) * diffX) / self.railWidth); - self.moveSliderTo(self.valueNow); + var diffX = event.pageX - self.railDomNode.offsetLeft; + self.valueNow = self.railMin + parseInt(((self.railMax - self.railMin) * diffX) / self.railWidth); + self.moveSliderTo(self.valueNow); - event.preventDefault(); - event.stopPropagation(); - }; + event.preventDefault(); + event.stopPropagation(); + }; - var handleMouseUp = function (event) { + var handleMouseUp = function (event) { - document.removeEventListener('mousemove', handleMouseMove); - document.removeEventListener('mouseup', handleMouseUp); + document.removeEventListener('mousemove', handleMouseMove); + document.removeEventListener('mouseup', handleMouseUp); - }; + }; // bind a mousemove event handler to move pointer - document.addEventListener('mousemove', handleMouseMove); + document.addEventListener('mousemove', handleMouseMove); - // bind a mouseup event handler to stop tracking mouse movements - document.addEventListener('mouseup', handleMouseUp); + // bind a mouseup event handler to stop tracking mouse movements + document.addEventListener('mouseup', handleMouseUp); - event.preventDefault(); - event.stopPropagation(); + event.preventDefault(); + event.stopPropagation(); - // Set focus to the clicked handle - this.domNode.focus(); + // Set focus to the clicked handle + this.domNode.focus(); - }; +}; // handleMouseMove has the same functionality as we need for handleMouseClick on the rail -//Slider.prototype.handleClick = function (event) { +// Slider.prototype.handleClick = function (event) { // var diffX = event.pageX - this.railDomNode.offsetLeft; // this.valueNow = parseInt(((this.railMax - this.railMin) * diffX) / this.railWidth); @@ -226,7 +226,7 @@ Slider.prototype.handleMouseDown = function (event) { // event.preventDefault(); // event.stopPropagation(); -//}; +// }; // Initialise Sliders on the page window.addEventListener('load', function () {