QSlider|QRange: fixes for ring (quasarframework#2564)

Author: pdanpdan

src/components/range/QRange.js

@@ -291,7 +291,7 @@ export default {
           edge ? 'handle-at-minimum' : null,
           { dragging: this.dragging }
         ],
-        attrs: { tabindex: this.editable ? 0 : -1 },
+        attrs: { tabindex: this.$q.platform.is.desktop ? (this.editable ? 0 : -1) : void 0 },
         on: {
           keydown: ev => this.__onKeyDown(ev, lower),
           keyup: ev => this.__onKeyUp(ev, lower)

src/components/slider/QSlider.js

@@ -147,7 +147,7 @@ export default {
             dragging: this.dragging,
             'handle-at-minimum': !this.fillHandleAlways && this.model === this.min
           },
-          attrs: { tabindex: this.editable ? 0 : -1 },
+          attrs: { tabindex: this.$q.platform.is.desktop ? (this.editable ? 0 : -1) : void 0 },
           on: {
             keydown: this.__onKeyDown,
             keyup: this.__onKeyUp

src/components/slider/slider.ios.styl

@@ -81,8 +81,8 @@ $slider-label-transform     = translateX(-50%) translateY(-139%) scale(1)
   transition all .2s ease-in
   background currentColor
 
-.q-slider:not(.disabled)
-  .q-slider-handle:focus, &:focus, &:hover
+.q-slider:not(.disabled):not(.readonly)
+  .q-slider-handle.dragging, .q-slider-handle:focus, body.desktop &:hover
     .q-slider-ring
       opacity .4
       transform scale(1)

src/components/slider/slider.mat.styl

@@ -94,7 +94,7 @@ $slider-label-transform     = translateX(-50%) translateY(-139%) scale(1)
   background currentColor
 
 .q-slider:not(.disabled):not(.readonly)
-  .q-slider-handle:focus, &:focus, &:hover
+  .q-slider-handle.dragging, .q-slider-handle:focus, body.desktop &:hover
     .q-slider-ring
       opacity .4
       transform scale(1)