@@ -7,7 +7,8 @@ export class Pin {
7
7
8
8
private keyListener : ( e : KeyboardEvent ) => void ;
9
9
private mouseDownListener : ( e : MouseEvent ) => void ;
10
- private mouseUpListener : ( e : MouseEvent ) => void ;
10
+ private touchStartListener : ( e : TouchEvent ) => void ;
11
+ private mouseUpTouchEndListener : ( e : MouseEvent | TouchEvent ) => void ;
11
12
private mouseLeaveListener : ( e : MouseEvent ) => void ;
12
13
13
14
constructor (
@@ -39,10 +40,12 @@ export class Pin {
39
40
40
41
this . mouseDownListener = ( e ) => {
41
42
e . preventDefault ( ) ;
42
- this . _mouseDown = true ;
43
- this . press ( ) ;
43
+ this . mouseDownTouchStartAction ( ) ;
44
44
} ;
45
- this . mouseUpListener = ( e ) => {
45
+ this . touchStartListener = ( e ) => {
46
+ this . mouseDownTouchStartAction ( ) ;
47
+ } ;
48
+ this . mouseUpTouchEndListener = ( e ) => {
46
49
e . preventDefault ( ) ;
47
50
if ( this . _mouseDown ) {
48
51
this . _mouseDown = false ;
@@ -59,7 +62,9 @@ export class Pin {
59
62
if ( this . ui ) {
60
63
const { element } = this . ui ;
61
64
element . addEventListener ( "mousedown" , this . mouseDownListener ) ;
62
- element . addEventListener ( "mouseup" , this . mouseUpListener ) ;
65
+ element . addEventListener ( "touchstart" , this . touchStartListener ) ;
66
+ element . addEventListener ( "mouseup" , this . mouseUpTouchEndListener ) ;
67
+ element . addEventListener ( "touchend" , this . mouseUpTouchEndListener ) ;
63
68
element . addEventListener ( "keydown" , this . keyListener ) ;
64
69
element . addEventListener ( "keyup" , this . keyListener ) ;
65
70
element . addEventListener ( "mouseleave" , this . mouseLeaveListener ) ;
@@ -80,6 +85,11 @@ export class Pin {
80
85
this . render ( ) ;
81
86
}
82
87
88
+ private mouseDownTouchStartAction ( ) {
89
+ this . _mouseDown = true ;
90
+ this . press ( ) ;
91
+ }
92
+
83
93
press ( ) {
84
94
this . setValueInternal (
85
95
this . state . value === this . state . min ? this . state . max : this . state . min ,
0 commit comments