quasar 2.18.6 → 2.19.0

package/src/components/slider/use-slider.js

@@ -2,8 +2,13 @@ import { h, ref, computed, onBeforeUnmount, getCurrentInstance } from 'vue'
 
 import TouchPan from '../../directives/touch-pan/TouchPan.js'
 
-import useDark, { useDarkProps } from '../../composables/private.use-dark/use-dark.js'
-import { useFormProps, useFormInject } from '../../composables/use-form/private.use-form.js'
+import useDark, {
+  useDarkProps
+} from '../../composables/private.use-dark/use-dark.js'
+import {
+  useFormProps,
+  useFormInject
+} from '../../composables/use-form/private.use-form.js'
 
 import { between } from '../../utils/format/format.js'
 import { position } from '../../utils/event/event.js'
@@ -12,14 +17,19 @@ import { hDir } from '../../utils/private.render/render.js'
 
 const markerPrefixClass = 'q-slider__marker-labels'
 const defaultMarkerConvertFn = v => ({ value: v })
-const defaultMarkerLabelRenderFn = ({ marker }) => h('div', {
-  key: marker.value,
-  style: marker.style,
-  class: marker.classes
-}, marker.label)
+const defaultMarkerLabelRenderFn = ({ marker }) =>
+  h(
+    'div',
+    {
+      key: marker.value,
+      style: marker.style,
+      class: marker.classes
+    },
+    marker.label
+  )
 
 // PGDOWN, LEFT, DOWN, PGUP, RIGHT, UP
-export const keyCodes = [ 34, 37, 40, 33, 39, 38 ]
+export const keyCodes = [34, 37, 40, 33, 39, 38]
 
 export const useSliderProps = {
   ...useDarkProps,
@@ -56,8 +66,8 @@ export const useSliderProps = {
   labelAlways: Boolean,
   switchLabelSide: Boolean,
 
-  markers: [ Boolean, Number ],
-  markerLabels: [ Boolean, Array, Object, Function ],
+  markers: [Boolean, Number],
+  markerLabels: [Boolean, Array, Object, Function],
   switchMarkerLabelsSide: Boolean,
 
   trackImg: String,
@@ -80,7 +90,7 @@ export const useSliderProps = {
   readonly: Boolean,
   dense: Boolean,
 
-  tabindex: [ String, Number ],
+  tabindex: [String, Number],
 
   thumbColor: String,
   thumbPath: {
@@ -89,10 +99,20 @@ export const useSliderProps = {
   }
 }
 
-export const useSliderEmits = [ 'pan', 'update:modelValue', 'change' ]
-
-export default function ({ updateValue, updatePosition, getDragging, formAttrs }) {
-  const { props, emit, slots, proxy: { $q } } = getCurrentInstance()
+export const useSliderEmits = ['pan', 'update:modelValue', 'change']
+
+export default function useSlider({
+  updateValue,
+  updatePosition,
+  getDragging,
+  formAttrs
+}) {
+  const {
+    props,
+    emit,
+    slots,
+    proxy: { $q }
+  } = getCurrentInstance()
   const isDark = useDark(props, $q)
 
   const injectFormInput = useFormInject(formAttrs)
@@ -103,41 +123,47 @@ export default function ({ updateValue, updatePosition, getDragging, formAttrs }
   const dragging = ref(false)
 
   const axis = computed(() => (props.vertical === true ? '--v' : '--h'))
-  const labelSide = computed(() => '-' + (props.switchLabelSide === true ? 'switched' : 'standard'))
+  const labelSide = computed(
+    () => '-' + (props.switchLabelSide === true ? 'switched' : 'standard')
+  )
 
-  const isReversed = computed(() => (
+  const isReversed = computed(() =>
     props.vertical === true
       ? props.reverse === true
       : props.reverse !== ($q.lang.rtl === true)
-  ))
+  )
 
-  const innerMin = computed(() => (
+  const innerMin = computed(() =>
     isNaN(props.innerMin) === true || props.innerMin < props.min
       ? props.min
       : props.innerMin
-  ))
-  const innerMax = computed(() => (
+  )
+  const innerMax = computed(() =>
     isNaN(props.innerMax) === true || props.innerMax > props.max
       ? props.max
       : props.innerMax
-  ))
+  )
 
-  const editable = computed(() => (
-    props.disable !== true && props.readonly !== true
-    && innerMin.value < innerMax.value
-  ))
+  const editable = computed(
+    () =>
+      props.disable !== true &&
+      props.readonly !== true &&
+      innerMin.value < innerMax.value
+  )
 
   const roundValueFn = computed(() => {
     if (props.step === 0) {
       return v => v
     }
 
-    const decimals = (String(props.step).trim().split('.')[ 1 ] || '').length
+    const decimals = (String(props.step).trim().split('.')[1] || '').length
     return v => parseFloat(v.toFixed(decimals))
   })
 
   const keyStep = computed(() => (props.step === 0 ? 1 : props.step))
-  const tabindex = computed(() => (editable.value === true ? props.tabindex || 0 : -1))
+  const tabindex = computed(() =>
+    editable.value === true ? props.tabindex || 0 : -1
+  )
 
   const trackLen = computed(() => props.max - props.min)
   const innerBarLen = computed(() => innerMax.value - innerMin.value)
@@ -145,15 +171,25 @@ export default function ({ updateValue, updatePosition, getDragging, formAttrs }
   const innerMinRatio = computed(() => convertModelToRatio(innerMin.value))
   const innerMaxRatio = computed(() => convertModelToRatio(innerMax.value))
 
-  const positionProp = computed(() => (
+  const positionProp = computed(() =>
     props.vertical === true
-      ? (isReversed.value === true ? 'bottom' : 'top')
-      : (isReversed.value === true ? 'right' : 'left')
-  ))
+      ? isReversed.value === true
+        ? 'bottom'
+        : 'top'
+      : isReversed.value === true
+        ? 'right'
+        : 'left'
+  )
 
-  const sizeProp = computed(() => (props.vertical === true ? 'height' : 'width'))
-  const thicknessProp = computed(() => (props.vertical === true ? 'width' : 'height'))
-  const orientation = computed(() => (props.vertical === true ? 'vertical' : 'horizontal'))
+  const sizeProp = computed(() =>
+    props.vertical === true ? 'height' : 'width'
+  )
+  const thicknessProp = computed(() =>
+    props.vertical === true ? 'width' : 'height'
+  )
+  const orientation = computed(() =>
+    props.vertical === true ? 'vertical' : 'horizontal'
+  )
 
   const attributes = computed(() => {
     const acc = {
@@ -165,87 +201,99 @@ export default function ({ updateValue, updatePosition, getDragging, formAttrs }
     }
 
     if (props.disable === true) {
-      acc[ 'aria-disabled' ] = 'true'
-    }
-    else if (props.readonly === true) {
-      acc[ 'aria-readonly' ] = 'true'
+      acc['aria-disabled'] = 'true'
+    } else if (props.readonly === true) {
+      acc['aria-readonly'] = 'true'
     }
 
     return acc
   })
 
-  const classes = computed(() =>
-    `q-slider q-slider${ axis.value } q-slider--${ active.value === true ? '' : 'in' }active inline no-wrap `
-    + (props.vertical === true ? 'row' : 'column')
-    + (props.disable === true ? ' disabled' : ' q-slider--enabled' + (editable.value === true ? ' q-slider--editable' : ''))
-    + (focus.value === 'both' ? ' q-slider--focus' : '')
-    + (props.label || props.labelAlways === true ? ' q-slider--label' : '')
-    + (props.labelAlways === true ? ' q-slider--label-always' : '')
-    + (isDark.value === true ? ' q-slider--dark' : '')
-    + (props.dense === true ? ' q-slider--dense q-slider--dense' + axis.value : '')
+  const classes = computed(
+    () =>
+      `q-slider q-slider${axis.value} q-slider--${active.value === true ? '' : 'in'}active inline no-wrap ` +
+      (props.vertical === true ? 'row' : 'column') +
+      (props.disable === true
+        ? ' disabled'
+        : ' q-slider--enabled' +
+          (editable.value === true ? ' q-slider--editable' : '')) +
+      (focus.value === 'both' ? ' q-slider--focus' : '') +
+      (props.label || props.labelAlways === true ? ' q-slider--label' : '') +
+      (props.labelAlways === true ? ' q-slider--label-always' : '') +
+      (isDark.value === true ? ' q-slider--dark' : '') +
+      (props.dense === true
+        ? ' q-slider--dense q-slider--dense' + axis.value
+        : '')
   )
 
-  function getPositionClass (name) {
+  function getPositionClass(name) {
     const cls = 'q-slider__' + name
-    return `${ cls } ${ cls }${ axis.value } ${ cls }${ axis.value }${ labelSide.value }`
+    return `${cls} ${cls}${axis.value} ${cls}${axis.value}${labelSide.value}`
   }
-  function getAxisClass (name) {
+  function getAxisClass(name) {
     const cls = 'q-slider__' + name
-    return `${ cls } ${ cls }${ axis.value }`
+    return `${cls} ${cls}${axis.value}`
   }
 
   const selectionBarClass = computed(() => {
     const color = props.selectionColor || props.color
-    return 'q-slider__selection absolute'
-      + (color !== void 0 ? ` text-${ color }` : '')
+    return (
+      'q-slider__selection absolute' +
+      (color !== void 0 ? ` text-${color}` : '')
+    )
   })
-  const markerClass = computed(() => getAxisClass('markers') + ' absolute overflow-hidden')
+  const markerClass = computed(
+    () => getAxisClass('markers') + ' absolute overflow-hidden'
+  )
   const trackContainerClass = computed(() => getAxisClass('track-container'))
   const pinClass = computed(() => getPositionClass('pin'))
   const labelClass = computed(() => getPositionClass('label'))
   const textContainerClass = computed(() => getPositionClass('text-container'))
-  const markerLabelsContainerClass = computed(() =>
-    getPositionClass('marker-labels-container')
-    + (props.markerLabelsClass !== void 0 ? ` ${ props.markerLabelsClass }` : '')
+  const markerLabelsContainerClass = computed(
+    () =>
+      getPositionClass('marker-labels-container') +
+      (props.markerLabelsClass !== void 0 ? ` ${props.markerLabelsClass}` : '')
   )
 
-  const trackClass = computed(() =>
-    'q-slider__track relative-position no-outline'
-    + (props.trackColor !== void 0 ? ` bg-${ props.trackColor }` : '')
+  const trackClass = computed(
+    () =>
+      'q-slider__track relative-position no-outline' +
+      (props.trackColor !== void 0 ? ` bg-${props.trackColor}` : '')
   )
   const trackStyle = computed(() => {
-    const acc = { [ thicknessProp.value ]: props.trackSize }
+    const acc = { [thicknessProp.value]: props.trackSize }
     if (props.trackImg !== void 0) {
-      acc.backgroundImage = `url(${ props.trackImg }) !important`
+      acc.backgroundImage = `url(${props.trackImg}) !important`
     }
     return acc
   })
 
-  const innerBarClass = computed(() =>
-    'q-slider__inner absolute'
-    + (props.innerTrackColor !== void 0 ? ` bg-${ props.innerTrackColor }` : '')
+  const innerBarClass = computed(
+    () =>
+      'q-slider__inner absolute' +
+      (props.innerTrackColor !== void 0 ? ` bg-${props.innerTrackColor}` : '')
   )
   const innerBarStyle = computed(() => {
     const innerDiff = innerMaxRatio.value - innerMinRatio.value
     const acc = {
-      [ positionProp.value ]: `${ 100 * innerMinRatio.value }%`,
-      [ sizeProp.value ]: innerDiff === 0
-        ? '2px'
-        : `${ 100 * innerDiff }%`
+      [positionProp.value]: `${100 * innerMinRatio.value}%`,
+      [sizeProp.value]: innerDiff === 0 ? '2px' : `${100 * innerDiff}%`
     }
     if (props.innerTrackImg !== void 0) {
-      acc.backgroundImage = `url(${ props.innerTrackImg }) !important`
+      acc.backgroundImage = `url(${props.innerTrackImg}) !important`
     }
     return acc
   })
 
-  function convertRatioToModel (ratio) {
+  function convertRatioToModel(ratio) {
     const { min, max, step } = props
     let model = min + ratio * (max - min)
 
     if (step > 0) {
       const modulo = (model - innerMin.value) % step
-      model += (Math.abs(modulo) >= step / 2 ? (modulo < 0 ? -1 : 1) * step : 0) - modulo
+      model +=
+        (Math.abs(modulo) >= step / 2 ? (modulo < 0 ? -1 : 1) * step : 0) -
+        modulo
     }
 
     model = roundValueFn.value(model)
@@ -253,18 +301,16 @@ export default function ({ updateValue, updatePosition, getDragging, formAttrs }
     return between(model, innerMin.value, innerMax.value)
   }
 
-  function convertModelToRatio (model) {
-    return trackLen.value === 0
-      ? 0
-      : (model - props.min) / trackLen.value
+  function convertModelToRatio(model) {
+    return trackLen.value === 0 ? 0 : (model - props.min) / trackLen.value
   }
 
-  function getDraggingRatio (evt, dragging) {
-    const
-      pos = position(evt),
-      val = props.vertical === true
-        ? between((pos.top - dragging.top) / dragging.height, 0, 1)
-        : between((pos.left - dragging.left) / dragging.width, 0, 1)
+  function getDraggingRatio(evt, draggingInfo) {
+    const pos = position(evt),
+      val =
+        props.vertical === true
+          ? between((pos.top - draggingInfo.top) / draggingInfo.height, 0, 1)
+          : between((pos.left - draggingInfo.left) / draggingInfo.width, 0, 1)
 
     return between(
       isReversed.value === true ? 1.0 - val : val,
@@ -273,8 +319,8 @@ export default function ({ updateValue, updatePosition, getDragging, formAttrs }
     )
   }
 
-  const markerStep = computed(() => (
-    isNumber(props.markers) === true ? props.markers : keyStep.value)
+  const markerStep = computed(() =>
+    isNumber(props.markers) === true ? props.markers : keyStep.value
   )
 
   const markerTicks = computed(() => {
@@ -293,21 +339,26 @@ export default function ({ updateValue, updatePosition, getDragging, formAttrs }
   })
 
   const markerLabelClass = computed(() => {
-    const prefix = ` ${ markerPrefixClass }${ axis.value }-`
-    return markerPrefixClass
-      + `${ prefix }${ props.switchMarkerLabelsSide === true ? 'switched' : 'standard' }`
-      + `${ prefix }${ isReversed.value === true ? 'rtl' : 'ltr' }`
+    const prefix = ` ${markerPrefixClass}${axis.value}-`
+    return (
+      markerPrefixClass +
+      `${prefix}${props.switchMarkerLabelsSide === true ? 'switched' : 'standard'}` +
+      `${prefix}${isReversed.value === true ? 'rtl' : 'ltr'}`
+    )
   })
 
   const markerLabelsList = computed(() => {
-    if (props.markerLabels === false) { return null }
+    if (props.markerLabels === false) {
+      return null
+    }
 
     return getMarkerList(props.markerLabels).map((entry, index) => ({
       index,
       value: entry.value,
       label: entry.label || entry.value,
-      classes: markerLabelClass.value
-        + (entry.classes !== void 0 ? ' ' + entry.classes : ''),
+      classes:
+        markerLabelClass.value +
+        (entry.classes !== void 0 ? ' ' + entry.classes : ''),
       style: {
         ...getMarkerLabelStyle(entry.value),
         ...(entry.style || {})
@@ -323,20 +374,21 @@ export default function ({ updateValue, updatePosition, getDragging, formAttrs }
   }))
 
   const markerStyle = computed(() => {
-    const size = innerBarLen.value === 0
-      ? '2px'
-      : 100 * markerStep.value / innerBarLen.value
+    const size =
+      innerBarLen.value === 0
+        ? '2px'
+        : (100 * markerStep.value) / innerBarLen.value
 
     return {
       ...innerBarStyle.value,
-      backgroundSize: props.vertical === true
-        ? `2px ${ size }%`
-        : `${ size }% 2px`
+      backgroundSize: props.vertical === true ? `2px ${size}%` : `${size}% 2px`
     }
   })
 
-  function getMarkerList (def) {
-    if (def === false) { return null }
+  function getMarkerList(def) {
+    if (def === false) {
+      return null
+    }
 
     if (def === true) {
       return markerTicks.value.map(defaultMarkerConvertFn)
@@ -345,7 +397,9 @@ export default function ({ updateValue, updatePosition, getDragging, formAttrs }
     if (typeof def === 'function') {
       return markerTicks.value.map(value => {
         const item = def(value)
-        return isObject(item) === true ? { ...item, value } : { value, label: item }
+        return isObject(item) === true
+          ? { ...item, value }
+          : { value, label: item }
       })
     }
 
@@ -357,85 +411,92 @@ export default function ({ updateValue, updatePosition, getDragging, formAttrs }
         .filter(filterFn)
     }
 
-    return Object.keys(def).map(key => {
-      const item = def[ key ]
-      const value = Number(key)
-      return isObject(item) === true ? { ...item, value } : { value, label: item }
-    }).filter(filterFn)
+    return Object.keys(def)
+      .map(key => {
+        const item = def[key]
+        const value = Number(key)
+        return isObject(item) === true
+          ? { ...item, value }
+          : { value, label: item }
+      })
+      .filter(filterFn)
   }
 
-  function getMarkerLabelStyle (val) {
-    return { [ positionProp.value ]: `${ 100 * (val - props.min) / trackLen.value }%` }
+  function getMarkerLabelStyle(val) {
+    return {
+      [positionProp.value]: `${(100 * (val - props.min)) / trackLen.value}%`
+    }
   }
 
   const markerLabelsMap = computed(() => {
-    if (props.markerLabels === false) { return null }
+    if (props.markerLabels === false) {
+      return null
+    }
 
     const acc = {}
     markerLabelsList.value.forEach(entry => {
-      acc[ entry.value ] = entry
+      acc[entry.value] = entry
     })
     return acc
   })
 
-  function getMarkerLabelsContent () {
-    if (slots[ 'marker-label-group' ] !== void 0) {
-      return slots[ 'marker-label-group' ](markerScope.value)
+  function getMarkerLabelsContent() {
+    if (slots['marker-label-group'] !== void 0) {
+      return slots['marker-label-group'](markerScope.value)
     }
 
-    const fn = slots[ 'marker-label' ] || defaultMarkerLabelRenderFn
-    return markerLabelsList.value.map(marker => fn({
-      marker,
-      ...markerScope.value
-    }))
+    const fn = slots['marker-label'] || defaultMarkerLabelRenderFn
+    return markerLabelsList.value.map(marker =>
+      fn({
+        marker,
+        ...markerScope.value
+      })
+    )
   }
 
-  const panDirective = computed(() => {
-    // if editable.value === true
-    return [ [
+  const panDirective = computed(() => [
+    [
       TouchPan,
       onPan,
       void 0,
       {
-        [ orientation.value ]: true,
+        [orientation.value]: true,
         prevent: true,
         stop: true,
         mouse: true,
         mouseAllDir: true
       }
-    ] ]
-  })
+    ]
+  ])
 
-  function onPan (event) {
+  function onPan(event) {
     if (event.isFinal === true) {
       if (dragging.value !== void 0) {
         updatePosition(event.evt)
         // only if touch, because we also have mousedown/up:
-        event.touch === true && updateValue(true)
+        if (event.touch === true) updateValue(true)
         dragging.value = void 0
         emit('pan', 'end')
       }
       active.value = false
       focus.value = false
-    }
-    else if (event.isFirst === true) {
+    } else if (event.isFirst === true) {
       dragging.value = getDragging(event.evt)
       updatePosition(event.evt)
       updateValue()
       active.value = true
       emit('pan', 'start')
-    }
-    else {
+    } else {
       updatePosition(event.evt)
       updateValue()
     }
   }
 
-  function onBlur () {
+  function onBlur() {
     focus.value = false
   }
 
-  function onActivate (evt) {
+  function onActivate(evt) {
     updatePosition(evt, getDragging(evt))
     updateValue()
 
@@ -445,7 +506,7 @@ export default function ({ updateValue, updatePosition, getDragging, formAttrs }
     document.addEventListener('mouseup', onDeactivate, true)
   }
 
-  function onDeactivate () {
+  function onDeactivate() {
     preventFocus.value = false
     active.value = false
 
@@ -455,89 +516,113 @@ export default function ({ updateValue, updatePosition, getDragging, formAttrs }
     document.removeEventListener('mouseup', onDeactivate, true)
   }
 
-  function onMobileClick (evt) {
+  function onMobileClick(evt) {
     updatePosition(evt, getDragging(evt))
     updateValue(true)
   }
 
-  function onKeyup (evt) {
+  function onKeyup(evt) {
     if (keyCodes.includes(evt.keyCode)) {
       updateValue(true)
     }
   }
 
-  function getTextContainerStyle (ratio) {
-    if (props.vertical === true) { return null }
+  function getTextContainerStyle(ratio) {
+    if (props.vertical === true) {
+      return null
+    }
 
     const p = $q.lang.rtl !== props.reverse ? 1 - ratio : ratio
     return {
-      transform: `translateX(calc(${ 2 * p - 1 } * ${ props.thumbSize } / 2 + ${ 50 - 100 * p }%))`
+      transform: `translateX(calc(${2 * p - 1} * ${props.thumbSize} / 2 + ${50 - 100 * p}%))`
     }
   }
 
-  function getThumbRenderFn (thumb) {
-    const focusClass = computed(() => (
-      preventFocus.value === false && (focus.value === thumb.focusValue || focus.value === 'both')
+  function getThumbRenderFn(thumb) {
+    const focusClass = computed(() =>
+      preventFocus.value === false &&
+      (focus.value === thumb.focusValue || focus.value === 'both')
         ? ' q-slider--focus'
         : ''
-    ))
+    )
 
-    const classes = computed(() =>
-      `q-slider__thumb q-slider__thumb${ axis.value } q-slider__thumb${ axis.value }-${ isReversed.value === true ? 'rtl' : 'ltr' } absolute non-selectable`
-      + focusClass.value
-      + (thumb.thumbColor.value !== void 0 ? ` text-${ thumb.thumbColor.value }` : '')
+    const thumbClasses = computed(
+      () =>
+        `q-slider__thumb q-slider__thumb${axis.value} q-slider__thumb${axis.value}-${isReversed.value === true ? 'rtl' : 'ltr'} absolute non-selectable` +
+        focusClass.value +
+        (thumb.thumbColor.value !== void 0
+          ? ` text-${thumb.thumbColor.value}`
+          : '')
     )
 
     const style = computed(() => ({
       width: props.thumbSize,
       height: props.thumbSize,
-      [ positionProp.value ]: `${ 100 * thumb.ratio.value }%`,
+      [positionProp.value]: `${100 * thumb.ratio.value}%`,
       zIndex: focus.value === thumb.focusValue ? 2 : void 0
     }))
 
-    const pinColor = computed(() => (
-      thumb.labelColor.value !== void 0
-        ? ` text-${ thumb.labelColor.value }`
-        : ''
-    ))
+    const pinColor = computed(() =>
+      thumb.labelColor.value !== void 0 ? ` text-${thumb.labelColor.value}` : ''
+    )
 
-    const textContainerStyle = computed(() => getTextContainerStyle(thumb.ratio.value))
+    const textContainerStyle = computed(() =>
+      getTextContainerStyle(thumb.ratio.value)
+    )
 
-    const textClass = computed(() => (
-      'q-slider__text'
-      + (thumb.labelTextColor.value !== void 0 ? ` text-${ thumb.labelTextColor.value }` : '')
-    ))
+    const textClass = computed(
+      () =>
+        'q-slider__text' +
+        (thumb.labelTextColor.value !== void 0
+          ? ` text-${thumb.labelTextColor.value}`
+          : '')
+    )
 
     return () => {
       const thumbContent = [
-        h('svg', {
-          class: 'q-slider__thumb-shape absolute-full',
-          viewBox: '0 0 20 20',
-          'aria-hidden': 'true'
-        }, [
-          h('path', { d: props.thumbPath })
-        ]),
+        h(
+          'svg',
+          {
+            class: 'q-slider__thumb-shape absolute-full',
+            viewBox: '0 0 20 20',
+            'aria-hidden': 'true'
+          },
+          [h('path', { d: props.thumbPath })]
+        ),
 
         h('div', { class: 'q-slider__focus-ring fit' })
       ]
 
       if (props.label === true || props.labelAlways === true) {
         thumbContent.push(
-          h('div', {
-            class: pinClass.value + ' absolute fit no-pointer-events' + pinColor.value
-          }, [
-            h('div', {
-              class: labelClass.value,
-              style: { minWidth: props.thumbSize }
-            }, [
-              h('div', {
-                class: textContainerClass.value,
-                style: textContainerStyle.value
-              }, [
-                h('span', { class: textClass.value }, thumb.label.value)
-              ])
-            ])
-          ])
+          h(
+            'div',
+            {
+              class:
+                pinClass.value +
+                ' absolute fit no-pointer-events' +
+                pinColor.value
+            },
+            [
+              h(
+                'div',
+                {
+                  class: labelClass.value,
+                  style: { minWidth: props.thumbSize }
+                },
+                [
+                  h(
+                    'div',
+                    {
+                      class: textContainerClass.value,
+                      style: textContainerStyle.value
+                    },
+                    [h('span', { class: textClass.value }, thumb.label.value)]
+                  )
+                ]
+              )
+            ]
+          )
         )
 
         if (props.name !== void 0 && props.disable !== true) {
@@ -545,40 +630,55 @@ export default function ({ updateValue, updatePosition, getDragging, formAttrs }
         }
       }
 
-      return h('div', {
-        class: classes.value,
-        style: style.value,
-        ...thumb.getNodeData()
-      }, thumbContent)
+      return h(
+        'div',
+        {
+          class: thumbClasses.value,
+          style: style.value,
+          ...thumb.getNodeData()
+        },
+        thumbContent
+      )
     }
   }
 
-  function getContent (selectionBarStyle, trackContainerTabindex, trackContainerEvents, injectThumb) {
+  function getContent(
+    selectionBarStyle,
+    trackContainerTabindex,
+    trackContainerEvents,
+    injectThumb
+  ) {
     const trackContent = []
 
-    props.innerTrackColor !== 'transparent' && trackContent.push(
-      h('div', {
-        key: 'inner',
-        class: innerBarClass.value,
-        style: innerBarStyle.value
-      })
-    )
+    if (props.innerTrackColor !== 'transparent') {
+      trackContent.push(
+        h('div', {
+          key: 'inner',
+          class: innerBarClass.value,
+          style: innerBarStyle.value
+        })
+      )
+    }
 
-    props.selectionColor !== 'transparent' && trackContent.push(
-      h('div', {
-        key: 'selection',
-        class: selectionBarClass.value,
-        style: selectionBarStyle.value
-      })
-    )
+    if (props.selectionColor !== 'transparent') {
+      trackContent.push(
+        h('div', {
+          key: 'selection',
+          class: selectionBarClass.value,
+          style: selectionBarStyle.value
+        })
+      )
+    }
 
-    props.markers !== false && trackContent.push(
-      h('div', {
-        key: 'marker',
-        class: markerClass.value,
-        style: markerStyle.value
-      })
-    )
+    if (props.markers !== false) {
+      trackContent.push(
+        h('div', {
+          key: 'marker',
+          class: markerClass.value,
+          style: markerStyle.value
+        })
+      )
+    }
 
     injectThumb(trackContent)
 
@@ -592,26 +692,33 @@ export default function ({ updateValue, updatePosition, getDragging, formAttrs }
           ...trackContainerEvents.value
         },
         [
-          h('div', {
-            class: trackClass.value,
-            style: trackStyle.value
-          }, trackContent)
+          h(
+            'div',
+            {
+              class: trackClass.value,
+              style: trackStyle.value
+            },
+            trackContent
+          )
         ],
         'slide',
-        editable.value, () => panDirective.value
+        editable.value,
+        () => panDirective.value
       )
     ]
 
     if (props.markerLabels !== false) {
-      const action = props.switchMarkerLabelsSide === true
-        ? 'unshift'
-        : 'push'
-
-      content[ action ](
-        h('div', {
-          key: 'markerL',
-          class: markerLabelsContainerClass.value
-        }, getMarkerLabelsContent())
+      const action = props.switchMarkerLabelsSide === true ? 'unshift' : 'push'
+
+      content[action](
+        h(
+          'div',
+          {
+            key: 'markerL',
+            class: markerLabelsContainerClass.value
+          },
+          getMarkerLabelsContent()
+        )
       )
     }