Increase touch target area of slider input (#3859)

Author: gadenbuie

NEWS.md

@@ -16,6 +16,9 @@
 
 * Closed #2956: Component authors can now prevent Shiny from creating an input binding on specific elements by adding the `data-shiny-no-bind-input` attribute to the element. The attribute may have any or no value; its presence will prevent binding. This feature is primarily useful for input component authors who want to use standard HTML input elements without causing Shiny to create an input binding for them. Additionally, Shiny now adds custom classes to its inputs. For example, `checkboxInput()` now has a `shiny-input-checkbox` class. These custom classes may be utilized in future updates to Shiny's input binding logic. (#3861)
 
+* Slider inputs created with `sliderInput()` now have a larger target area for clicking or tapping on the slider line or the slider bar. (#3859)
+
+
 ### Bug fixes
 
 * Fixed #3771: Sometimes the error `ion.rangeSlider.min.js: i.stopPropagation is not a function` would appear in the JavaScript console. (#3772)

inst/www/shared/ionrangeslider/css/ion.rangeSlider.css

@@ -1,5 +1,6 @@
 @charset "UTF-8";
 /* 'shiny' skin for Ion.RangeSlider, largely based on the 'big' skin, but with smaller dimensions, grayscale grid text, and without gradients
+© Posit, PBC, 2023
 © RStudio, Inc, 2014
 © Denis Ineshin, 2014  https://github.com/IonDen
 © guybowden, 2014  https://github.com/guybowden
@@ -174,6 +175,18 @@
   background-color: #ededed;
   border: 1px solid #cccccc;
   border-radius: 8px;
+  overflow: visible;
+}
+
+.irs--shiny .irs-line::before {
+  content: "";
+  display: block;
+  position: relative;
+  cursor: s-resize;
+  width: 100%;
+  height: 22px;
+  top: -9px;
+  z-index: 1;
 }
 
 .irs--shiny .irs-bar {
@@ -182,12 +195,24 @@
   border-top: 1px solid #428bca;
   border-bottom: 1px solid #428bca;
   background: #428bca;
+  cursor: s-resize;
+  z-index: 2;
 }
 
 .irs--shiny .irs-bar--single {
   border-radius: 8px 0 0 8px;
 }
 
+.irs--shiny .irs-bar::before {
+  content: "";
+  display: block;
+  position: relative;
+  width: 100%;
+  height: 22px;
+  top: -9px;
+  z-index: 2;
+}
+
 .irs--shiny .irs-shadow {
   top: 38px;
   height: 2px;
@@ -207,6 +232,7 @@
   background-color: #dedede;
   box-shadow: 1px 1px 3px rgba(255, 255, 255, 0.3);
   border-radius: 22px;
+  z-index: 2;
 }
 
 .irs--shiny .irs-handle.state_hover, .irs--shiny .irs-handle:hover {

inst/www/shared/ionrangeslider/scss/shiny.scss

@@ -1,4 +1,5 @@
 /* 'shiny' skin for Ion.RangeSlider, largely based on the 'big' skin, but with smaller dimensions, grayscale grid text, and without gradients
+© Posit, PBC, 2023
 © RStudio, Inc, 2014
 © Denis Ineshin, 2014  https://github.com/IonDen
 © guybowden, 2014  https://github.com/guybowden
@@ -79,6 +80,19 @@ $font-family: $font-family-base !default;
     background-color: $line_bg_color;
     border: $line_border;
     @include border-radius-shim($line_height);
+
+    // Increase the touch target area of the slider line
+    overflow: visible;
+    &::before {
+      content: "";
+      display: block;
+      position: relative;
+      cursor: s-resize; // downward arrow
+      width: 100%;
+      height: $handle_height;
+      top: -(($handle_height - $line_height / 2) / 2);
+      z-index: 1; // raise touch area above grid
+    }
   }
 
   .#{$name}-bar {
@@ -87,10 +101,23 @@ $font-family: $font-family-base !default;
     border-top: 1px solid $bar_color;
     border-bottom: 1px solid $bar_color;
     background: $bar_color;
+    cursor: s-resize; // downard arrow, overwritten when a range
+    z-index: 2;
 
     &--single {
       @include border-radius-shim($line_height 0 0 $line_height);
     }
+
+    // Increase the touch target area of the slider bar
+    &::before {
+      content: "";
+      display: block;
+      position: relative;
+      width: 100%;
+      height: $handle_height;
+      top: -(($handle_height - $line_height / 2) / 2);
+      z-index: 2; // raise touch area above line touch target
+    }
   }
 
   // sliderInput() doesn't currently support from_min/from_max, so this isn't relevant
@@ -114,6 +141,7 @@ $font-family: $font-family-base !default;
     background-color: $handle_color;
     box-shadow: $handle_box_shadow;
     border-radius: $handle_width;
+    z-index: 2;
 
     &.state_hover,
     &:hover {

inst/www/shared/shiny.min.css

@@ -157,6 +157,9 @@ pre.shiny-text-output {
   margin-top: -9px;
 }
 .slider-animate-button {
+  /* Ensure controls above slider line touch target */
+  position: relative;
+  z-index: 1;
   opacity: 0.5;
   .pause {
     display: none;

inst/www/shared/shiny_scss/shiny.scss

@@ -3,8 +3,9 @@ new file mode 100644
 index 00000000..ba052f8b
 --- /dev/null
 +++ b/inst/www/shared/ionrangeslider/scss/shiny.scss
-@@ -0,0 +1,173 @@
+@@ -0,0 +1,201 @@
 +/* 'shiny' skin for Ion.RangeSlider, largely based on the 'big' skin, but with smaller dimensions, grayscale grid text, and without gradients
++© Posit, PBC, 2023
 +© RStudio, Inc, 2014
 +© Denis Ineshin, 2014  https://github.com/IonDen
 +© guybowden, 2014  https://github.com/guybowden
@@ -85,6 +86,19 @@ index 00000000..ba052f8b
 +    background-color: $line_bg_color;
 +    border: $line_border;
 +    @include border-radius-shim($line_height);
++
++    // Increase the touch target area of the slider line
++    overflow: visible;
++    &::before {
++      content: "";
++      display: block;
++      position: relative;
++      cursor: s-resize; // downward arrow
++      width: 100%;
++      height: $handle_height;
++      top: -(($handle_height - $line_height / 2) / 2);
++      z-index: 1; // raise touch area above grid
++    }
 +  }
 +
 +  .#{$name}-bar {
@@ -93,10 +107,23 @@ index 00000000..ba052f8b
 +    border-top: 1px solid $bar_color;
 +    border-bottom: 1px solid $bar_color;
 +    background: $bar_color;
++    cursor: s-resize; // downard arrow, overwritten when a range
++    z-index: 2;
 +
 +    &--single {
 +      @include border-radius-shim($line_height 0 0 $line_height);
 +    }
++
++    // Increase the touch target area of the slider bar
++    &::before {
++      content: "";
++      display: block;
++      position: relative;
++      width: 100%;
++      height: $handle_height;
++      top: -(($handle_height - $line_height / 2) / 2);
++      z-index: 2; // raise touch area above line touch target
++    }
 +  }
 +
 +  // sliderInput() doesn't currently support from_min/from_max, so this isn't relevant
@@ -120,6 +147,7 @@ index 00000000..ba052f8b
 +    background-color: $handle_color;
 +    box-shadow: $handle_box_shadow;
 +    border-radius: $handle_width;
++    z-index: 2;
 +
 +    &.state_hover,
 +    &:hover {