Slider: Keyboard control like native

Graham Fairweather
1 parent f0c2af9d
Showing 2 changed files with 77 additions and 11 deletions Show diff stats
src/components/slider/slider.vue
src/styles/components/slider.less
@@ -8,20 +8,44 @@
             :value="exportValue[0]"
             :disabled="disabled"
             @on-change="handleInputChange"></Input-number>
-        <div :class="[prefixCls + '-wrap']" ref="slider" @click.self="sliderClick">
+        <div
+            :class="[prefixCls + '-wrap']"
+            ref="slider" @click.self="sliderClick"
+        >
             <input type="hidden" :name="name" :value="exportValue">
             <template v-if="showStops">
-                <div :class="[prefixCls + '-stop']" v-for="item in stops" :style="{ 'left': item + '%' }" @click.self="sliderClick"></div>
+                <div
+                    :class="[prefixCls + '-stop']"
+                    v-for="item in stops"
+                    :style="{ 'left': item + '%' }"
+                    @click.self="sliderClick"
+                ></div>
             </template>
-            <div :class="[prefixCls + '-bar']" :style="barStyle" @click.self="sliderClick"></div>
+            <div
+                :class="[prefixCls + '-bar']"
+                :style="barStyle"
+                @click.self="sliderClick"></div>
             <div
                 :class="[prefixCls + '-button-wrap']"
                 :style="{left: minPosition + '%'}"
                 @touchstart="onPointerDown($event, 'min')"
                 @mousedown="onPointerDown($event, 'min')">
-                <Tooltip :controlled="pointerDown === 'min'" placement="top" :content="tipFormat(exportValue[0])"
-                         :disabled="tipDisabled" :always="showTip === 'always'" ref="minTooltip">
-                    <div :class="minButtonClasses"></div>
+                <Tooltip
+                    :controlled="pointerDown === 'min'"
+                    placement="top"
+                    :content="tipFormat(exportValue[0])"
+                    :disabled="tipDisabled"
+                    :always="showTip === 'always'"
+                    ref="minTooltip"
+                >
+                    <div
+                        :class="minButtonClasses"
+                        tabindex="0"
+                        @keydown.left="onKeyLeft($event, 'min')"
+                        @keydown.down="onKeyLeft($event, 'min')"
+                        @keydown.right="onKeyRight($event, 'min')"
+                        @keydown.up="onKeyRight($event, 'min')"
+                    ></div>
                 </Tooltip>
             </div>
             <div v-if="range"
@@ -29,9 +53,22 @@
                  :style="{left: maxPosition + '%'}"
                  @touchstart="onPointerDown($event, 'max')"
                  @mousedown="onPointerDown($event, 'max')">
-                <Tooltip :controlled="pointerDown === 'max'" placement="top" :content="tipFormat(exportValue[1])"
-                         :disabled="tipDisabled" :always="showTip === 'always'" ref="maxTooltip">
-                    <div :class="maxButtonClasses"></div>
+                <Tooltip
+                    :controlled="pointerDown === 'max'"
+                    placement="top"
+                    :content="tipFormat(exportValue[1])"
+                    :disabled="tipDisabled"
+                    :always="showTip === 'always'"
+                    ref="maxTooltip"
+                >
+                    <div
+                        :class="maxButtonClasses"
+                        tabindex="0"
+                        @keydown.left="onKeyLeft($event, 'max')"
+                        @keydown.down="onKeyLeft($event, 'max')"
+                        @keydown.right="onKeyRight($event, 'max')"
+                        @keydown.up="onKeyRight($event, 'max')"
+                    ></div>
                 </Tooltip>
             </div>
         </div>
@@ -110,7 +147,11 @@
                 startX: 0,
                 currentX: 0,
                 startPos: 0,
-                oldValue: val
+                oldValue: val,
+                valueIndex: {
+                    min: 0,
+                    max: 1,
+                },
             };
         },
         watch: {
@@ -173,7 +214,6 @@
                 return (val[1] - this.min) / this.valueRange * 100;
             },
             barStyle () {
-
                 const style = {
                     width: (this.currentValue[0] - this.min) / this.valueRange * 100 + '%'
                 };
@@ -216,6 +256,30 @@
                 max = Math.min(this.max, max);
                 return [min, max];
             },
+            getCurrentValue (event, type) {
+              if (this.disabled) {
+                return;
+              }
+
+              const index = this.valueIndex[type];
+              if (typeof index === 'undefined') {
+                return;
+              }
+
+              return this.currentValue[index];
+            },
+            onKeyLeft (event, type) {
+              const value = this.getCurrentValue(event, type);
+              if (Number.isFinite(value)) {
+                this.changeButtonPosition(value - this.step, type);
+              }
+            },
+            onKeyRight (event, type) {
+              const value = this.getCurrentValue(event, type);
+              if (Number.isFinite(value)) {
+                this.changeButtonPosition(value + this.step, type);
+              }
+            },
             onPointerDown (event, type) {
                 if (this.disabled) return;
                 event.preventDefault();
@@ -34,7 +34,9 @@
         border-radius: 50%;
         background-color: #fff;
         transition: all @transition-time linear;
+        outline: 0;
  
+        &:focus,
         &:hover,
         &-dragging
         {