Enlarge slider controls for touchscreen devices

examples/gui/data/css/style.css

@@ -582,9 +582,16 @@
     display: block;
     position: relative;
     width: 100%;
-    height: 4px;
+    height: 27px;
+    border-radius: 13px;
     background-color: #bebebe;
   }
+  @media (pointer: fine) {
+    .rkmd-slider input[type="range"] + .slider {
+      height: 4px;
+      border-radius: 0px;
+    }
+  }
   .rkmd-slider input[type="range"] + .slider .slider-fill {
     display: block;
     position: absolute;
@@ -596,7 +603,7 @@
   .rkmd-slider input[type="range"] + .slider .slider-handle {
     cursor: pointer;
     position: absolute;
-    top: -5.5px;
+    top: 12px;
     left: 0%;
     width: 15px;
     height: 15px;
@@ -606,6 +613,11 @@
     user-select: none;
     z-index: 2;
   }
+  @media (pointer:fine) {
+    .rkmd-slider input[type="range"] + .slider .slider-handle {
+      top: -5.5px;
+    }
+  }
   .rkmd-slider input[type="range"]:disabled + .slider {
     background-color: #b0b0b0 !important;
   }
@@ -648,17 +660,24 @@
   .rkmd-slider.slider-discrete .slider .slider-handle .slider-label {
     position: absolute;
     top: -17.5px;
-    left: -2px;
+    left: 4px;
     width: 30px;
     height: 30px;
     -webkit-transform-origin: 50% 100%;
             transform-origin: 50% 100%;
     border-radius: 50%;
-    -webkit-transform: scale(0.5) rotate(-45deg);
-            transform: scale(0.5) rotate(-45deg);
+    -webkit-transform: scale(1.0) rotate(-45deg);
+            transform: scale(1.0) rotate(-45deg);
     -webkit-transition: all .2s ease;
     transition: all .2s ease;
   }
+  @media (pointer: fine) {
+    .rkmd-slider.slider-discrete .slider .slider-handle .slider-label {
+      left: -2px;
+      -webkit-transform: scale(0.5) rotate(-45deg);
+              transform: scale(0.5) rotate(-45deg);
+    }
+  }
 
   .rkmd-slider.slider-discrete .slider .slider-handle .slider-label span {
     position: absolute;
@@ -666,7 +685,7 @@
     left: 0px;
     width: 100%;
     color: #fff;
-    font-size: 12px;
+    font-size: 16px;
     text-align: center;
     -webkit-transform: rotate(45deg);
             transform: rotate(45deg);
@@ -676,7 +695,11 @@
         -ms-user-select: none;
             user-select: none;
   }
-
+  @media (pointer:fine) {
+    .rkmd-slider.slider-discrete .slider .slider-handle .slider-label span {
+      font-size: 12px;
+    }
+  }
   .rkmd-slider.slider-discrete .slider .slider-handle.is-active {
     top: 0px;
     margin-left: -2px;