Touch Areas for Sliders Overlap

[Denz1994]

Slider pointer areas overlap. This may interfere with touch device functionality.

[Denz1994]

TL:DR
Essentially, having an option and default value within HSlider to adjust the touch areas without adjusting the thumb node would be a solution to this issue. Also this will give other sims the flexibility in doing so, if needed.

One approach includes adjusting the touch areas of the thumb node. However, we don't have access to the thumb node touch area because it is localized within HSlider (a common object used in other sims). We could add an option parameter to HSlider object that adjusts the touch area.

Currently, the touch area on the slider thumb node has a default value that depends only on the size of the thumb node. If we wanted to adjust the touch area around the thumb node, we would have to adjust size of the thumb node itself. This may cause issues in formatting due to space limitations.

Having an option to divorce the touch area from the thumb node is one approach, but would require an adjustment to HSlider. This adjustment could be made to not affect any other simulation using HSlider, but at the same time allow for flexibility.

SUN/js/HSlider.js - lines 37-53

 function HSlider( valueProperty, range, options ) {

    var thisSlider = this;
    Node.call( thisSlider );

    options = _.extend( {
      // track - see HSliderTrack.js constructor for additional pass-through options
      trackSize: new Dimension2( 100, 5 ),
      enabledRangeProperty: new Property( range ),
      // {Node} optional thumb, replaces the default. Client is responsible for highlighting and disabling. Centered in the track.
      // If you are using the default thumb, see ThumbNode constructor for additional pass-through options.
      thumbNode: null,
      thumbNodeTouchAreaDilation:null,
      // ticks
      tickLabelSpacing: 6,
      majorTickLength: 25,
      majorTickStroke: 'black',

SUN/js/HSlider.js - lines 111-119

// thumb touch area
    if ( !options.thumbNode && !options.thumbNodeTouchAreaDilation ) {
      var dx = 0.5 * thumbNode.width;
      var dy = 0.25 * thumbNode.height;
      thumbNode.touchArea = Shape.rectangle( ( -thumbNode.width / 2 ) - dx, ( -thumbNode.height / 2 ) - dy, thumbNode.width + dx + dx, thumbNode.height + dy + dy );
    }
    else {
      thumbNode.touchArea = thumbNode.bounds.dilated( options.thumbNodeTouchAreaDilation );
    }

The changes to note are :

• touchNodeTouchAreaDilation as an optional parameter
• else statement to handle any change in touch area dilation

We would now be able to pass any touch area dilation as an option to any object that uses the HSlider object.

*Note: These changes can be made to adjust the horizontal/vertical independently or scale both together by a common factor. The latter is implemented in the above code.

[veillette]

I found that there is a Sun Issue, see phetsims/sun#202

[pixelzoom]

We need to add options related to the thumb's touchArea and mouseArea to HSlider. See comment phetsims/sun#202 (comment).

[pixelzoom]

Duplicate of #72. Closing.