@dimailn/vuetify 2.7.2-alpha24 → 2.7.2-alpha25

package/src/components/VSkeletonLoader/__tests__/__snapshots__/VSkeletonLoader.spec.ts.snap

@@ -21,11 +21,11 @@ exports[`VSkeletonLoader.ts should dynamically render content 2`] = `
 `;
 
 exports[`VSkeletonLoader.ts should generate a skeleton recursive tree 1`] = `
-<div aria-busy="true"
+<div class="v-skeleton-loader v-skeleton-loader--is-loading theme--light"
+     aria-busy="true"
      aria-live="polite"
      aria-label="$vuetify.loading"
      role="alert"
-     class="v-skeleton-loader v-skeleton-loader--is-loading theme--light"
 >
   <div class="v-skeleton-loader__button v-skeleton-loader__bone">
   </div>
@@ -35,11 +35,11 @@ exports[`VSkeletonLoader.ts should generate a skeleton recursive tree 1`] = `
 `;
 
 exports[`VSkeletonLoader.ts should generate a skeleton recursive tree 2`] = `
-<div aria-busy="true"
+<div class="v-skeleton-loader v-skeleton-loader--is-loading theme--light"
+     aria-busy="true"
      aria-live="polite"
      aria-label="$vuetify.loading"
      role="alert"
-     class="v-skeleton-loader v-skeleton-loader--is-loading theme--light"
 >
   <div class="v-skeleton-loader__heading v-skeleton-loader__bone">
   </div>
@@ -55,11 +55,11 @@ exports[`VSkeletonLoader.ts should generate a skeleton recursive tree 2`] = `
 `;
 
 exports[`VSkeletonLoader.ts should generate a skeleton recursive tree 3`] = `
-<div aria-busy="true"
+<div class="v-skeleton-loader v-skeleton-loader--is-loading theme--light"
+     aria-busy="true"
      aria-live="polite"
      aria-label="$vuetify.loading"
      role="alert"
-     class="v-skeleton-loader v-skeleton-loader--is-loading theme--light"
 >
   <div class="v-skeleton-loader__avatar v-skeleton-loader__bone">
   </div>
@@ -67,11 +67,11 @@ exports[`VSkeletonLoader.ts should generate a skeleton recursive tree 3`] = `
 `;
 
 exports[`VSkeletonLoader.ts should generate a skeleton recursive tree 4`] = `
-<div aria-busy="true"
+<div class="v-skeleton-loader v-skeleton-loader--is-loading theme--light"
+     aria-busy="true"
      aria-live="polite"
      aria-label="$vuetify.loading"
      role="alert"
-     class="v-skeleton-loader v-skeleton-loader--is-loading theme--light"
 >
   <div class="v-skeleton-loader__button v-skeleton-loader__bone">
   </div>
@@ -79,11 +79,11 @@ exports[`VSkeletonLoader.ts should generate a skeleton recursive tree 4`] = `
 `;
 
 exports[`VSkeletonLoader.ts should generate a skeleton recursive tree 5`] = `
-<div aria-busy="true"
+<div class="v-skeleton-loader v-skeleton-loader--is-loading theme--light"
+     aria-busy="true"
      aria-live="polite"
      aria-label="$vuetify.loading"
      role="alert"
-     class="v-skeleton-loader v-skeleton-loader--is-loading theme--light"
 >
   <div class="v-skeleton-loader__image v-skeleton-loader__bone">
   </div>
@@ -95,11 +95,11 @@ exports[`VSkeletonLoader.ts should generate a skeleton recursive tree 5`] = `
 `;
 
 exports[`VSkeletonLoader.ts should generate a skeleton recursive tree 6`] = `
-<div aria-busy="true"
+<div class="v-skeleton-loader v-skeleton-loader--is-loading theme--light"
+     aria-busy="true"
      aria-live="polite"
      aria-label="$vuetify.loading"
      role="alert"
-     class="v-skeleton-loader v-skeleton-loader--is-loading theme--light"
 >
   <div class="v-skeleton-loader__image v-skeleton-loader__bone">
   </div>
@@ -113,11 +113,11 @@ exports[`VSkeletonLoader.ts should generate a skeleton recursive tree 6`] = `
 `;
 
 exports[`VSkeletonLoader.ts should generate a skeleton recursive tree 7`] = `
-<div aria-busy="true"
+<div class="v-skeleton-loader v-skeleton-loader--is-loading theme--light"
+     aria-busy="true"
      aria-live="polite"
      aria-label="$vuetify.loading"
      role="alert"
-     class="v-skeleton-loader v-skeleton-loader--is-loading theme--light"
 >
   <div class="v-skeleton-loader__heading v-skeleton-loader__bone">
   </div>
@@ -125,11 +125,11 @@ exports[`VSkeletonLoader.ts should generate a skeleton recursive tree 7`] = `
 `;
 
 exports[`VSkeletonLoader.ts should generate a skeleton recursive tree 8`] = `
-<div aria-busy="true"
+<div class="v-skeleton-loader v-skeleton-loader--is-loading theme--light"
+     aria-busy="true"
      aria-live="polite"
      aria-label="$vuetify.loading"
      role="alert"
-     class="v-skeleton-loader v-skeleton-loader--is-loading theme--light"
 >
   <div class="v-skeleton-loader__chip v-skeleton-loader__bone">
   </div>
@@ -137,11 +137,11 @@ exports[`VSkeletonLoader.ts should generate a skeleton recursive tree 8`] = `
 `;
 
 exports[`VSkeletonLoader.ts should generate a skeleton recursive tree 9`] = `
-<div aria-busy="true"
+<div class="v-skeleton-loader v-skeleton-loader--is-loading theme--light"
+     aria-busy="true"
      aria-live="polite"
      aria-label="$vuetify.loading"
      role="alert"
-     class="v-skeleton-loader v-skeleton-loader--is-loading theme--light"
 >
   <div class="v-skeleton-loader__list-item v-skeleton-loader__bone">
     <div class="v-skeleton-loader__text v-skeleton-loader__bone">
@@ -229,11 +229,11 @@ exports[`VSkeletonLoader.ts should generate a skeleton recursive tree 9`] = `
 `;
 
 exports[`VSkeletonLoader.ts should generate a skeleton recursive tree 10`] = `
-<div aria-busy="true"
+<div class="v-skeleton-loader v-skeleton-loader--is-loading theme--light"
+     aria-busy="true"
      aria-live="polite"
      aria-label="$vuetify.loading"
      role="alert"
-     class="v-skeleton-loader v-skeleton-loader--is-loading theme--light"
 >
   <div class="v-skeleton-loader__text v-skeleton-loader__bone">
   </div>
@@ -245,11 +245,11 @@ exports[`VSkeletonLoader.ts should generate a skeleton recursive tree 10`] = `
 `;
 
 exports[`VSkeletonLoader.ts should generate a skeleton recursive tree 11`] = `
-<div aria-busy="true"
+<div class="v-skeleton-loader v-skeleton-loader--is-loading theme--light"
+     aria-busy="true"
      aria-live="polite"
      aria-label="$vuetify.loading"
      role="alert"
-     class="v-skeleton-loader v-skeleton-loader--is-loading theme--light"
 >
   <div class="v-skeleton-loader__avatar v-skeleton-loader__bone">
   </div>
@@ -311,11 +311,11 @@ exports[`VSkeletonLoader.ts should generate a skeleton recursive tree 11`] = `
 `;
 
 exports[`VSkeletonLoader.ts should generate a skeleton recursive tree 12`] = `
-<div aria-busy="true"
+<div class="v-skeleton-loader v-skeleton-loader--is-loading theme--light"
+     aria-busy="true"
      aria-live="polite"
      aria-label="$vuetify.loading"
      role="alert"
-     class="v-skeleton-loader v-skeleton-loader--is-loading theme--light"
 >
   <div class="v-skeleton-loader__heading v-skeleton-loader__bone">
   </div>
@@ -323,11 +323,11 @@ exports[`VSkeletonLoader.ts should generate a skeleton recursive tree 12`] = `
 `;
 
 exports[`VSkeletonLoader.ts should generate a skeleton recursive tree 13`] = `
-<div aria-busy="true"
+<div class="v-skeleton-loader v-skeleton-loader--is-loading theme--light"
+     aria-busy="true"
      aria-live="polite"
      aria-label="$vuetify.loading"
      role="alert"
-     class="v-skeleton-loader v-skeleton-loader--is-loading theme--light"
 >
   <div class="v-skeleton-loader__image v-skeleton-loader__bone">
   </div>
@@ -335,11 +335,11 @@ exports[`VSkeletonLoader.ts should generate a skeleton recursive tree 13`] = `
 `;
 
 exports[`VSkeletonLoader.ts should generate a skeleton recursive tree 14`] = `
-<div aria-busy="true"
+<div class="v-skeleton-loader v-skeleton-loader--is-loading theme--light"
+     aria-busy="true"
      aria-live="polite"
      aria-label="$vuetify.loading"
      role="alert"
-     class="v-skeleton-loader v-skeleton-loader--is-loading theme--light"
 >
   <div class="v-skeleton-loader__text v-skeleton-loader__bone">
   </div>
@@ -347,11 +347,11 @@ exports[`VSkeletonLoader.ts should generate a skeleton recursive tree 14`] = `
 `;
 
 exports[`VSkeletonLoader.ts should generate a skeleton recursive tree 15`] = `
-<div aria-busy="true"
+<div class="v-skeleton-loader v-skeleton-loader--is-loading theme--light"
+     aria-busy="true"
      aria-live="polite"
      aria-label="$vuetify.loading"
      role="alert"
-     class="v-skeleton-loader v-skeleton-loader--is-loading theme--light"
 >
   <div class="v-skeleton-loader__avatar v-skeleton-loader__bone">
   </div>
@@ -361,11 +361,11 @@ exports[`VSkeletonLoader.ts should generate a skeleton recursive tree 15`] = `
 `;
 
 exports[`VSkeletonLoader.ts should generate a skeleton recursive tree 16`] = `
-<div aria-busy="true"
+<div class="v-skeleton-loader v-skeleton-loader--is-loading theme--light"
+     aria-busy="true"
      aria-live="polite"
      aria-label="$vuetify.loading"
      role="alert"
-     class="v-skeleton-loader v-skeleton-loader--is-loading theme--light"
 >
   <div class="v-skeleton-loader__sentences v-skeleton-loader__bone">
     <div class="v-skeleton-loader__text v-skeleton-loader__bone">
@@ -377,11 +377,11 @@ exports[`VSkeletonLoader.ts should generate a skeleton recursive tree 16`] = `
 `;
 
 exports[`VSkeletonLoader.ts should generate a skeleton recursive tree 17`] = `
-<div aria-busy="true"
+<div class="v-skeleton-loader v-skeleton-loader--is-loading theme--light"
+     aria-busy="true"
      aria-live="polite"
      aria-label="$vuetify.loading"
      role="alert"
-     class="v-skeleton-loader v-skeleton-loader--is-loading theme--light"
 >
   <div class="v-skeleton-loader__avatar v-skeleton-loader__bone">
   </div>
@@ -395,11 +395,11 @@ exports[`VSkeletonLoader.ts should generate a skeleton recursive tree 17`] = `
 `;
 
 exports[`VSkeletonLoader.ts should generate a skeleton recursive tree 18`] = `
-<div aria-busy="true"
+<div class="v-skeleton-loader v-skeleton-loader--is-loading theme--light"
+     aria-busy="true"
      aria-live="polite"
      aria-label="$vuetify.loading"
      role="alert"
-     class="v-skeleton-loader v-skeleton-loader--is-loading theme--light"
 >
   <div class="v-skeleton-loader__paragraph v-skeleton-loader__bone">
     <div class="v-skeleton-loader__text v-skeleton-loader__bone">
@@ -413,11 +413,11 @@ exports[`VSkeletonLoader.ts should generate a skeleton recursive tree 18`] = `
 `;
 
 exports[`VSkeletonLoader.ts should generate a skeleton recursive tree 19`] = `
-<div aria-busy="true"
+<div class="v-skeleton-loader v-skeleton-loader--is-loading theme--light"
+     aria-busy="true"
      aria-live="polite"
      aria-label="$vuetify.loading"
      role="alert"
-     class="v-skeleton-loader v-skeleton-loader--is-loading theme--light"
 >
   <div class="v-skeleton-loader__avatar v-skeleton-loader__bone">
   </div>
@@ -433,11 +433,11 @@ exports[`VSkeletonLoader.ts should generate a skeleton recursive tree 19`] = `
 `;
 
 exports[`VSkeletonLoader.ts should generate a skeleton recursive tree 20`] = `
-<div aria-busy="true"
+<div class="v-skeleton-loader v-skeleton-loader--is-loading theme--light"
+     aria-busy="true"
      aria-live="polite"
      aria-label="$vuetify.loading"
      role="alert"
-     class="v-skeleton-loader v-skeleton-loader--is-loading theme--light"
 >
   <div class="v-skeleton-loader__text v-skeleton-loader__bone">
   </div>
@@ -449,11 +449,11 @@ exports[`VSkeletonLoader.ts should generate a skeleton recursive tree 20`] = `
 `;
 
 exports[`VSkeletonLoader.ts should generate a skeleton recursive tree 21`] = `
-<div aria-busy="true"
+<div class="v-skeleton-loader v-skeleton-loader--is-loading theme--light"
+     aria-busy="true"
      aria-live="polite"
      aria-label="$vuetify.loading"
      role="alert"
-     class="v-skeleton-loader v-skeleton-loader--is-loading theme--light"
 >
   <div class="v-skeleton-loader__text v-skeleton-loader__bone">
   </div>
@@ -463,11 +463,11 @@ exports[`VSkeletonLoader.ts should generate a skeleton recursive tree 21`] = `
 `;
 
 exports[`VSkeletonLoader.ts should generate a skeleton recursive tree 22`] = `
-<div aria-busy="true"
+<div class="v-skeleton-loader v-skeleton-loader--is-loading theme--light"
+     aria-busy="true"
      aria-live="polite"
      aria-label="$vuetify.loading"
      role="alert"
-     class="v-skeleton-loader v-skeleton-loader--is-loading theme--light"
 >
   <div class="v-skeleton-loader__table-heading v-skeleton-loader__bone">
     <div class="v-skeleton-loader__heading v-skeleton-loader__bone">
@@ -685,11 +685,11 @@ exports[`VSkeletonLoader.ts should generate a skeleton recursive tree 22`] = `
 `;
 
 exports[`VSkeletonLoader.ts should generate a skeleton recursive tree 23`] = `
-<div aria-busy="true"
+<div class="v-skeleton-loader v-skeleton-loader--is-loading theme--light"
+     aria-busy="true"
      aria-live="polite"
      aria-label="$vuetify.loading"
      role="alert"
-     class="v-skeleton-loader v-skeleton-loader--is-loading theme--light"
 >
   <div class="v-skeleton-loader__heading v-skeleton-loader__bone">
   </div>
@@ -699,11 +699,11 @@ exports[`VSkeletonLoader.ts should generate a skeleton recursive tree 23`] = `
 `;
 
 exports[`VSkeletonLoader.ts should generate a skeleton recursive tree 24`] = `
-<div aria-busy="true"
+<div class="v-skeleton-loader v-skeleton-loader--is-loading theme--light"
+     aria-busy="true"
      aria-live="polite"
      aria-label="$vuetify.loading"
      role="alert"
-     class="v-skeleton-loader v-skeleton-loader--is-loading theme--light"
 >
   <div class="v-skeleton-loader__heading v-skeleton-loader__bone">
   </div>
@@ -721,11 +721,11 @@ exports[`VSkeletonLoader.ts should generate a skeleton recursive tree 24`] = `
 `;
 
 exports[`VSkeletonLoader.ts should generate a skeleton recursive tree 25`] = `
-<div aria-busy="true"
+<div class="v-skeleton-loader v-skeleton-loader--is-loading theme--light"
+     aria-busy="true"
      aria-live="polite"
      aria-label="$vuetify.loading"
      role="alert"
-     class="v-skeleton-loader v-skeleton-loader--is-loading theme--light"
 >
   <div class="v-skeleton-loader__table-row-divider v-skeleton-loader__bone">
     <div class="v-skeleton-loader__table-row v-skeleton-loader__bone">
@@ -911,11 +911,11 @@ exports[`VSkeletonLoader.ts should generate a skeleton recursive tree 25`] = `
 `;
 
 exports[`VSkeletonLoader.ts should generate a skeleton recursive tree 26`] = `
-<div aria-busy="true"
+<div class="v-skeleton-loader v-skeleton-loader--is-loading theme--light"
+     aria-busy="true"
      aria-live="polite"
      aria-label="$vuetify.loading"
      role="alert"
-     class="v-skeleton-loader v-skeleton-loader--is-loading theme--light"
 >
   <div class="v-skeleton-loader__table-row v-skeleton-loader__bone">
     <div class="v-skeleton-loader__table-cell v-skeleton-loader__bone">
@@ -949,11 +949,11 @@ exports[`VSkeletonLoader.ts should generate a skeleton recursive tree 26`] = `
 `;
 
 exports[`VSkeletonLoader.ts should generate a skeleton recursive tree 27`] = `
-<div aria-busy="true"
+<div class="v-skeleton-loader v-skeleton-loader--is-loading theme--light"
+     aria-busy="true"
      aria-live="polite"
      aria-label="$vuetify.loading"
      role="alert"
-     class="v-skeleton-loader v-skeleton-loader--is-loading theme--light"
 >
   <div class="v-skeleton-loader__table-cell v-skeleton-loader__bone">
     <div class="v-skeleton-loader__text v-skeleton-loader__bone">
@@ -983,11 +983,11 @@ exports[`VSkeletonLoader.ts should generate a skeleton recursive tree 27`] = `
 `;
 
 exports[`VSkeletonLoader.ts should generate a skeleton recursive tree 28`] = `
-<div aria-busy="true"
+<div class="v-skeleton-loader v-skeleton-loader--is-loading theme--light"
+     aria-busy="true"
      aria-live="polite"
      aria-label="$vuetify.loading"
      role="alert"
-     class="v-skeleton-loader v-skeleton-loader--is-loading theme--light"
 >
   <div class="v-skeleton-loader__text v-skeleton-loader__bone">
   </div>
@@ -995,11 +995,11 @@ exports[`VSkeletonLoader.ts should generate a skeleton recursive tree 28`] = `
 `;
 
 exports[`VSkeletonLoader.ts should generate a skeleton recursive tree 29`] = `
-<div aria-busy="true"
+<div class="v-skeleton-loader v-skeleton-loader--is-loading theme--light"
+     aria-busy="true"
      aria-live="polite"
      aria-label="$vuetify.loading"
      role="alert"
-     class="v-skeleton-loader v-skeleton-loader--is-loading theme--light"
 >
   <div class="v-skeleton-loader__text v-skeleton-loader__bone">
   </div>
@@ -1013,11 +1013,11 @@ exports[`VSkeletonLoader.ts should generate a skeleton recursive tree 29`] = `
 `;
 
 exports[`VSkeletonLoader.ts should generate a skeleton recursive tree 30`] = `
-<div aria-busy="true"
+<div class="v-skeleton-loader v-skeleton-loader--is-loading theme--light"
+     aria-busy="true"
      aria-live="polite"
      aria-label="$vuetify.loading"
      role="alert"
-     class="v-skeleton-loader v-skeleton-loader--is-loading theme--light"
 >
   <div class="v-skeleton-loader__text v-skeleton-loader__bone">
   </div>

package/src/components/VSlider/VSlider.ts

@@ -16,11 +16,10 @@ import { addOnceEventListener, deepEqual, keyCodes, createRange, convertToUnit,
 import { consoleWarn } from '../../util/console'
 
 // Types
-import Vue, { VNode, VNodeChildrenArrayContents, PropType, h } from 'vue'
-import { ScopedSlotChildren } from 'vue/types/vnode'
+import { defineComponent, VNode, PropType, h, getCurrentInstance, withDirectives, vShow } from 'vue'
 import { PropValidator } from 'vue/types/options'
 
-interface options extends Vue {
+interface options {
   $refs: {
     track: HTMLElement
   }
@@ -63,7 +62,7 @@ export default mixins<options &
     thumbLabel: {
       type: [Boolean, String] as PropType<boolean | 'always' | undefined>,
       default: undefined,
-      validator: v => typeof v === 'boolean' || v === 'always',
+      validator: (v: any) => typeof v === 'boolean' || v === 'always' || v === undefined,
     },
     thumbSize: {
       type: [Number, String],
@@ -76,7 +75,7 @@ export default mixins<options &
     ticks: {
       type: [Boolean, String] as PropType<boolean | 'always'>,
       default: false,
-      validator: v => typeof v === 'boolean' || v === 'always',
+      validator: (v: any) => typeof v === 'boolean' || v === 'always',
     },
     tickSize: {
       type: [Number, String],
@@ -88,6 +87,16 @@ export default mixins<options &
     vertical: Boolean,
   },
 
+  emits: [
+    'update:modelValue',
+    'start',
+    'end',
+    'mouseup',
+    'change',
+    'focus',
+    'blur',
+  ],
+
   data: () => ({
     app: null as any,
     oldValue: null as any,
@@ -113,11 +122,14 @@ export default mixins<options &
         return this.lazyValue
       },
       set (val: number) {
+        const originalVal = val
         val = isNaN(val) ? this.minValue : val
         // Round value to ensure the
         // entire slider range can
         // be selected with step
-        const value = this.roundValue(Math.min(Math.max(val, this.minValue), this.maxValue))
+        let value = this.roundValue(val)
+        // Then clamp to min/max
+        value = Math.min(Math.max(value, this.minValue), this.maxValue)
 
         if (value === this.lazyValue) return
 
@@ -140,7 +152,8 @@ export default mixins<options &
       return parseFloat(this.max)
     },
     stepNumeric (): number {
-      return this.step > 0 ? parseFloat(this.step) : 0
+      const step = parseFloat(this.step)
+      return step > 0 ? step : 0
     },
     inputWidth (): number {
       const inputWidth = (this.roundValue(this.internalValue) - this.minValue) / (this.maxValue - this.minValue) * 100
@@ -209,20 +222,26 @@ export default mixins<options &
   watch: {
     min (val) {
       const parsed = parseFloat(val)
-      parsed > this.internalValue && this.$emit('update:modelValue', parsed)
+      if (parsed > this.internalValue) {
+        this.$emit('update:modelValue', parsed)
+      }
     },
     max (val) {
       const parsed = parseFloat(val)
-      parsed < this.internalValue && this.$emit('update:modelValue', parsed)
+      if (parsed < this.internalValue) {
+        this.$emit('update:modelValue', parsed)
+      }
     },
     modelValue: {
       handler (v: number) {
+        // Use the setter to ensure proper rounding and validation
         this.internalValue = v
       },
       immediate: true,
     },
   },
 
+
   mounted () {
     // Without a v-app, iOS does not work with body selectors
     this.app = document.querySelector('[data-app]') ||
@@ -230,8 +249,8 @@ export default mixins<options &
   },
 
   methods: {
-    genDefaultSlot (): VNodeChildrenArrayContents {
-      const children: VNodeChildrenArrayContents = [this.genLabel()]
+    genDefaultSlot (): VNode[] {
+      const children: VNode[] = [this.genLabel()]
       const slider = this.genSlider()
       this.inverseLabel
         ? children.unshift(slider)
@@ -242,7 +261,7 @@ export default mixins<options &
       return children
     },
     genSlider (): VNode {
-      return h('div', {
+      return withDirectives(h('div', {
         class: {
           'v-slider': true,
           'v-slider--horizontal': !this.vertical,
@@ -253,16 +272,14 @@ export default mixins<options &
           'v-slider--readonly': this.isReadonly,
           ...this.themeClasses,
         },
-        directives: [{
-          name: 'click-outside',
-          value: this.onBlur,
-        }],
         onClick: this.onSliderClick,
         onMousedown: this.onSliderMouseDown,
         onTouchstart: this.onSliderMouseDown,
-      }, this.genChildren())
+      }, this.genChildren()), [
+        [ClickOutside, this.onBlur],
+      ])
     },
-    genChildren (): VNodeChildrenArrayContents {
+    genChildren (): VNode[] {
       return [
         this.genInput(),
         this.genTrackContainer(),
@@ -378,17 +395,17 @@ export default mixins<options &
         'aria-valuenow': this.internalValue,
         'aria-readonly': String(this.isReadonly),
         'aria-orientation': this.vertical ? 'vertical' : 'horizontal',
-        onFocus: onFocus,
-        onBlur: onBlur,
+        onFocus,
+        onBlur,
         onKeydown: this.onKeyDown,
       }), children)
     },
-    genThumbLabelContent (value: number | string): ScopedSlotChildren {
+    genThumbLabelContent (value: number | string): any {
       return this.$slots['thumb-label']
         ? this.$slots['thumb-label']!({ value })
         : [h('span', [String(value)])]
     },
-    genThumbLabel (content: ScopedSlotChildren): VNode {
+    genThumbLabel (content: any): VNode {
       const size = convertToUnit(this.thumbSize)
 
       const transform = this.vertical
@@ -398,12 +415,8 @@ export default mixins<options &
       return h(VScaleTransition, {
         origin: 'bottom center',
       }, [
-        h('div', {
+        withDirectives(h('div', {
           class: 'v-slider__thumb-label-container',
-          directives: [{
-            name: 'show',
-            value: this.isFocused || this.isActive || this.thumbLabel === 'always',
-          }],
         }, [
           h('div', this.setBackgroundColor(this.computedThumbColor, {
             class: 'v-slider__thumb-label',
@@ -413,6 +426,8 @@ export default mixins<options &
               transform,
             },
           }), [h('div', content)]),
+        ]), [
+          [vShow, this.isFocused || this.isActive || this.thumbLabel === 'always'],
         ]),
       ])
     },
@@ -510,6 +525,7 @@ export default mixins<options &
 
       this.onMouseMove(e)
       this.$emit('update:modelValue', this.internalValue)
+      this.$emit('change', this.internalValue)
     },
     onBlur (e: Event) {
       this.isFocused = false