@vuetify/nightly 3.0.0-beta.0 → 3.0.0-beta.13

package/lib/components/VSlider/VSlider.sass

@@ -1,5 +1,3 @@
-// Imports
-@forward './variables'
 @use 'sass:map'
 @use 'sass:selector'
 @use '../../styles/settings'
@@ -8,15 +6,20 @@
 
 // Block
 .v-slider
-  input
-    cursor: default
+  .v-slider__container
+    input
+      cursor: default
+      padding: 0
+      width: 100%
+      display: none
+
+  .v-input__append, .v-input__prepend
     padding: 0
-    width: 100%
-    display: none
 
 // Elements
 .v-slider__container
   position: relative
+  min-height: inherit
   width: 100%
   height: 100%
   display: flex
@@ -32,8 +35,9 @@
 
 // Modifiers
 .v-slider.v-input--horizontal
-  margin-left: $slider-horizontal-left
-  margin-right: $slider-horizontal-right
+  align-items: center
+  margin-inline-start: $slider-horizontal-start
+  margin-inline-end: $slider-horizontal-end
 
   .v-input__control
     min-height: $slider-horizontal-min-height
@@ -41,6 +45,7 @@
     align-items: center
 
 .v-slider.v-input--vertical
+  justify-content: center
   margin-top: $slider-vertical-margin-top
   margin-bottom: $slider-vertical-margin-bottom
 
@@ -51,4 +56,7 @@
   pointer-events: none
 
 .v-slider--has-labels .v-input__control
-  margin-bottom: $slider-tick-label-margin-bottom * .5
+  margin-bottom: $slider-tick-label-margin-top * .5
+
+.v-slider__label
+  margin-inline-end: $slider-label-margin-end

package/lib/components/VSlider/VSliderThumb.css

@@ -1,4 +1,5 @@
 .v-slider-thumb {
+  touch-action: none;
   color: rgb(var(--v-theme-surface-variant));
 }
 .v-input--error:not(.v-input--disabled) .v-slider-thumb {
@@ -122,11 +123,8 @@
   left: -6px;
 }
 
-.v-slider-thumb--focused .v-slider-thumb__surface::before, .v-slider-thumb:hover .v-slider-thumb__surface::before {
-  transform: scale(2);
-}
-
 .v-slider-thumb--focused .v-slider-thumb__surface::before {
+  transform: scale(2);
   opacity: var(--v-focus-opacity);
 }
 
@@ -137,6 +135,12 @@
   opacity: var(--v-pressed-opacity);
 }
 
-.v-slider-thumb:hover:not(.v-slider-thumb--focused) .v-slider-thumb__surface::before {
-  opacity: var(--v-hover-opacity);
+@media (hover: hover) {
+  .v-slider-thumb:hover .v-slider-thumb__surface::before {
+    transform: scale(2);
+  }
+
+  .v-slider-thumb:hover:not(.v-slider-thumb--focused) .v-slider-thumb__surface::before {
+    opacity: var(--v-hover-opacity);
+  }
 }

package/lib/components/VSlider/VSliderThumb.mjs

@@ -3,15 +3,15 @@ import { vShow as _vShow, withDirectives as _withDirectives, resolveDirective as
 import "./VSliderThumb.css"; // Components
 
 import { VScaleTransition } from "../transitions/index.mjs";
-import { VSliderSymbol } from "./slider.mjs";
-import { useElevation } from "../../composables/elevation.mjs"; // Directives
+import { VSliderSymbol } from "./slider.mjs"; // Directives
 
 import Ripple from "../../directives/ripple/index.mjs"; // Composables
 
+import { useElevation } from "../../composables/elevation.mjs";
 import { useTextColor } from "../../composables/color.mjs"; // Utilities
 
 import { computed, inject } from 'vue';
-import { convertToUnit, defineComponent, keyValues } from "../../util/index.mjs";
+import { convertToUnit, defineComponent, keyValues, useRender } from "../../util/index.mjs";
 export const VSliderThumb = defineComponent({
   name: 'VSliderThumb',
   directives: {
@@ -111,8 +111,8 @@ export const VSliderThumb = defineComponent({
       newValue != null && emit('update:modelValue', newValue);
     }
 
-    return () => {
-      var _slots$thumbLabel, _slots$thumbLabel2;
+    useRender(() => {
+      var _slots$thumbLabel;
 
       const positionPercentage = convertToUnit(vertical.value ? 100 - props.position : props.position, '%');
       const inset = vertical.value ? 'block' : 'inline';
@@ -154,11 +154,12 @@ export const VSliderThumb = defineComponent({
           "class": "v-slider-thumb__label-container"
         }, [_createVNode("div", {
           "class": ['v-slider-thumb__label']
-        }, [_createVNode("div", null, [(_slots$thumbLabel = (_slots$thumbLabel2 = slots['thumb-label']) == null ? void 0 : _slots$thumbLabel2.call(slots, {
+        }, [_createVNode("div", null, [((_slots$thumbLabel = slots['thumb-label']) == null ? void 0 : _slots$thumbLabel.call(slots, {
           modelValue: props.modelValue
-        })) != null ? _slots$thumbLabel : props.modelValue.toFixed(step.value ? decimals.value : 1)])])]), [[_vShow, thumbLabel.value && props.focused || thumbLabel.value === 'always']])]
+        })) ?? props.modelValue.toFixed(step.value ? decimals.value : 1)])])]), [[_vShow, thumbLabel.value && props.focused || thumbLabel.value === 'always']])]
       })]);
-    };
+    });
+    return {};
   }
 
 });

package/lib/components/VSlider/VSliderThumb.mjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/VSlider/VSliderThumb.tsx"],"names":["VScaleTransition","VSliderSymbol","useElevation","Ripple","useTextColor","computed","inject","convertToUnit","defineComponent","keyValues","VSliderThumb","name","directives","props","focused","Boolean","max","type","Number","required","min","modelValue","position","emits","v","setup","slots","emit","slider","Error","thumbColor","step","vertical","disabled","thumbSize","thumbLabel","direction","readonly","elevation","isReversed","horizontalDirection","mousePressed","decimals","textColorClasses","textColorStyles","pageup","pagedown","end","home","left","right","down","up","relevantKeys","multipliers","value","parseKeydown","e","includes","key","preventDefault","_step","steps","increase","multiplier","shiftKey","ctrlKey","Math","onKeydown","newValue","positionPercentage","inset","elevationClasses","undefined","toFixed"],"mappings":"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","sourcesContent":["// Styles\nimport './VSliderThumb.sass'\n\n// Components\nimport { VScaleTransition } from '../transitions'\nimport { VSliderSymbol } from './slider'\nimport { useElevation } from '@/composables/elevation'\n\n// Directives\nimport Ripple from '@/directives/ripple'\n\n// Composables\nimport { useTextColor } from '@/composables/color'\n\n// Utilities\nimport { computed, inject } from 'vue'\nimport { convertToUnit, defineComponent, keyValues } from '@/util'\n\nexport const VSliderThumb = defineComponent({\n  name: 'VSliderThumb',\n\n  directives: { Ripple },\n\n  props: {\n    focused: Boolean,\n    max: {\n      type: Number,\n      required: true,\n    },\n    min: {\n      type: Number,\n      required: true,\n    },\n    modelValue: {\n      type: Number,\n      required: true,\n    },\n    position: {\n      type: Number,\n      required: true,\n    },\n  },\n\n  emits: {\n    'update:modelValue': (v: number) => true,\n  },\n\n  setup (props, { slots, emit }) {\n    const slider = inject(VSliderSymbol)\n\n    if (!slider) throw new Error('[Vuetify] v-slider-thumb must be used inside v-slider or v-range-slider')\n\n    const {\n      thumbColor,\n      step,\n      vertical,\n      disabled,\n      thumbSize,\n      thumbLabel,\n      direction,\n      readonly,\n      elevation,\n      isReversed,\n      horizontalDirection,\n      mousePressed,\n      decimals,\n    } = slider\n\n    const { textColorClasses, textColorStyles } = useTextColor(thumbColor)\n\n    const { pageup, pagedown, end, home, left, right, down, up } = keyValues\n    const relevantKeys = [pageup, pagedown, end, home, left, right, down, up]\n\n    const multipliers = computed(() => {\n      if (step.value) return [1, 2, 3]\n      else return [1, 5, 10]\n    })\n\n    function parseKeydown (e: KeyboardEvent, value: number) {\n      if (!relevantKeys.includes(e.key)) return\n\n      e.preventDefault()\n\n      const _step = step.value || 0.1\n      const steps = (props.max - props.min) / _step\n      if ([left, right, down, up].includes(e.key)) {\n        const increase = isReversed.value ? [left, up] : [right, up]\n        const direction = increase.includes(e.key) ? 1 : -1\n        const multiplier = e.shiftKey ? 2 : (e.ctrlKey ? 1 : 0)\n\n        value = value + (direction * _step * multipliers.value[multiplier])\n      } else if (e.key === home) {\n        value = props.min\n      } else if (e.key === end) {\n        value = props.max\n      } else {\n        const direction = e.key === pagedown ? 1 : -1\n        value = value - (direction * _step * (steps > 100 ? steps / 10 : 10))\n      }\n\n      return Math.max(props.min, Math.min(props.max, value))\n    }\n\n    function onKeydown (e: KeyboardEvent) {\n      const newValue = parseKeydown(e, props.modelValue)\n\n      newValue != null && emit('update:modelValue', newValue)\n    }\n\n    return () => {\n      const positionPercentage = convertToUnit(vertical.value ? 100 - props.position : props.position, '%')\n      const inset = vertical.value ? 'block' : 'inline'\n      const { elevationClasses } = useElevation(computed(() => !disabled.value ? elevation.value : undefined))\n\n      return (\n        <div\n          class={[\n            'v-slider-thumb',\n            {\n              'v-slider-thumb--focused': props.focused,\n              'v-slider-thumb--pressed': props.focused && mousePressed.value,\n            },\n          ]}\n          style={{\n            [`inset-${inset}-start`]: `calc(${positionPercentage} - var(--v-slider-thumb-size) / 2)`,\n            '--v-slider-thumb-size': convertToUnit(thumbSize.value),\n            direction: !vertical.value ? horizontalDirection.value : undefined,\n          }}\n          role=\"slider\"\n          tabindex={ disabled.value ? -1 : 0 }\n          aria-valuemin={ props.min }\n          aria-valuemax={ props.max }\n          aria-valuenow={ props.modelValue }\n          aria-readonly={ readonly.value }\n          aria-orientation={ direction.value }\n          onKeydown={ !readonly.value ? onKeydown : undefined }\n        >\n          <div\n            class={[\n              'v-slider-thumb__surface',\n              textColorClasses.value,\n              elevationClasses.value,\n            ]}\n            style={{\n              ...textColorStyles.value,\n            }}\n          />\n          <div\n            class={[\n              'v-slider-thumb__ripple',\n              textColorClasses.value,\n            ]}\n            style={ textColorStyles.value }\n            v-ripple={[true, null, ['circle', 'center']]}\n          />\n          <VScaleTransition origin=\"bottom center\">\n            <div\n              class=\"v-slider-thumb__label-container\"\n              v-show={ (thumbLabel.value && props.focused) || thumbLabel.value === 'always' }\n            >\n              <div\n                class={[\n                  'v-slider-thumb__label',\n                ]}\n              >\n                <div>\n                  { slots['thumb-label']?.({ modelValue: props.modelValue }) ?? props.modelValue.toFixed(step.value ? decimals.value : 1) }\n                </div>\n              </div>\n            </div>\n          </VScaleTransition>\n        </div>\n      )\n    }\n  },\n})\n\nexport type VSliderThumb = InstanceType<typeof VSliderThumb>\n"],"file":"VSliderThumb.mjs"}
+{"version":3,"file":"VSliderThumb.mjs","names":["VScaleTransition","VSliderSymbol","Ripple","useElevation","useTextColor","computed","inject","convertToUnit","defineComponent","keyValues","useRender","VSliderThumb","name","directives","props","focused","Boolean","max","type","Number","required","min","modelValue","position","emits","v","setup","slots","emit","slider","Error","thumbColor","step","vertical","disabled","thumbSize","thumbLabel","direction","readonly","elevation","isReversed","horizontalDirection","mousePressed","decimals","textColorClasses","textColorStyles","pageup","pagedown","end","home","left","right","down","up","relevantKeys","multipliers","value","parseKeydown","e","includes","key","preventDefault","_step","steps","increase","multiplier","shiftKey","ctrlKey","Math","onKeydown","newValue","positionPercentage","inset","elevationClasses","undefined","toFixed"],"sources":["../../../src/components/VSlider/VSliderThumb.tsx"],"sourcesContent":["// Styles\nimport './VSliderThumb.sass'\n\n// Components\nimport { VScaleTransition } from '../transitions'\nimport { VSliderSymbol } from './slider'\n\n// Directives\nimport Ripple from '@/directives/ripple'\n\n// Composables\nimport { useElevation } from '@/composables/elevation'\nimport { useTextColor } from '@/composables/color'\n\n// Utilities\nimport { computed, inject } from 'vue'\nimport { convertToUnit, defineComponent, keyValues, useRender } from '@/util'\n\nexport const VSliderThumb = defineComponent({\n  name: 'VSliderThumb',\n\n  directives: { Ripple },\n\n  props: {\n    focused: Boolean,\n    max: {\n      type: Number,\n      required: true,\n    },\n    min: {\n      type: Number,\n      required: true,\n    },\n    modelValue: {\n      type: Number,\n      required: true,\n    },\n    position: {\n      type: Number,\n      required: true,\n    },\n  },\n\n  emits: {\n    'update:modelValue': (v: number) => true,\n  },\n\n  setup (props, { slots, emit }) {\n    const slider = inject(VSliderSymbol)\n\n    if (!slider) throw new Error('[Vuetify] v-slider-thumb must be used inside v-slider or v-range-slider')\n\n    const {\n      thumbColor,\n      step,\n      vertical,\n      disabled,\n      thumbSize,\n      thumbLabel,\n      direction,\n      readonly,\n      elevation,\n      isReversed,\n      horizontalDirection,\n      mousePressed,\n      decimals,\n    } = slider\n\n    const { textColorClasses, textColorStyles } = useTextColor(thumbColor)\n\n    const { pageup, pagedown, end, home, left, right, down, up } = keyValues\n    const relevantKeys = [pageup, pagedown, end, home, left, right, down, up]\n\n    const multipliers = computed(() => {\n      if (step.value) return [1, 2, 3]\n      else return [1, 5, 10]\n    })\n\n    function parseKeydown (e: KeyboardEvent, value: number) {\n      if (!relevantKeys.includes(e.key)) return\n\n      e.preventDefault()\n\n      const _step = step.value || 0.1\n      const steps = (props.max - props.min) / _step\n      if ([left, right, down, up].includes(e.key)) {\n        const increase = isReversed.value ? [left, up] : [right, up]\n        const direction = increase.includes(e.key) ? 1 : -1\n        const multiplier = e.shiftKey ? 2 : (e.ctrlKey ? 1 : 0)\n\n        value = value + (direction * _step * multipliers.value[multiplier])\n      } else if (e.key === home) {\n        value = props.min\n      } else if (e.key === end) {\n        value = props.max\n      } else {\n        const direction = e.key === pagedown ? 1 : -1\n        value = value - (direction * _step * (steps > 100 ? steps / 10 : 10))\n      }\n\n      return Math.max(props.min, Math.min(props.max, value))\n    }\n\n    function onKeydown (e: KeyboardEvent) {\n      const newValue = parseKeydown(e, props.modelValue)\n\n      newValue != null && emit('update:modelValue', newValue)\n    }\n\n    useRender(() => {\n      const positionPercentage = convertToUnit(vertical.value ? 100 - props.position : props.position, '%')\n      const inset = vertical.value ? 'block' : 'inline'\n      const { elevationClasses } = useElevation(computed(() => !disabled.value ? elevation.value : undefined))\n\n      return (\n        <div\n          class={[\n            'v-slider-thumb',\n            {\n              'v-slider-thumb--focused': props.focused,\n              'v-slider-thumb--pressed': props.focused && mousePressed.value,\n            },\n          ]}\n          style={{\n            [`inset-${inset}-start`]: `calc(${positionPercentage} - var(--v-slider-thumb-size) / 2)`,\n            '--v-slider-thumb-size': convertToUnit(thumbSize.value),\n            direction: !vertical.value ? horizontalDirection.value : undefined,\n          }}\n          role=\"slider\"\n          tabindex={ disabled.value ? -1 : 0 }\n          aria-valuemin={ props.min }\n          aria-valuemax={ props.max }\n          aria-valuenow={ props.modelValue }\n          aria-readonly={ readonly.value }\n          aria-orientation={ direction.value }\n          onKeydown={ !readonly.value ? onKeydown : undefined }\n        >\n          <div\n            class={[\n              'v-slider-thumb__surface',\n              textColorClasses.value,\n              elevationClasses.value,\n            ]}\n            style={{\n              ...textColorStyles.value,\n            }}\n          />\n          <div\n            class={[\n              'v-slider-thumb__ripple',\n              textColorClasses.value,\n            ]}\n            style={ textColorStyles.value }\n            v-ripple={[true, null, ['circle', 'center']]}\n          />\n          <VScaleTransition origin=\"bottom center\">\n            <div\n              class=\"v-slider-thumb__label-container\"\n              v-show={ (thumbLabel.value && props.focused) || thumbLabel.value === 'always' }\n            >\n              <div\n                class={[\n                  'v-slider-thumb__label',\n                ]}\n              >\n                <div>\n                  { slots['thumb-label']?.({ modelValue: props.modelValue }) ?? props.modelValue.toFixed(step.value ? decimals.value : 1) }\n                </div>\n              </div>\n            </div>\n          </VScaleTransition>\n        </div>\n      )\n    })\n\n    return {}\n  },\n})\n\nexport type VSliderThumb = InstanceType<typeof VSliderThumb>\n"],"mappings":"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"}

package/lib/components/VSlider/VSliderThumb.sass

@@ -1,5 +1,3 @@
-// Imports
-@forward './variables'
 @use 'sass:map'
 @use 'sass:selector'
 @use 'sass:math'
@@ -9,6 +7,7 @@
 
 // Theme
 .v-slider-thumb
+  touch-action: none
   color: rgb(var(--v-theme-surface-variant))
 
   .v-input--error:not(.v-input--disabled) &
@@ -128,13 +127,10 @@
       left: -$slider-thumb-label-wedge-size
 
 // Modifiers
-.v-slider-thumb--focused, .v-slider-thumb:hover
-  .v-slider-thumb__surface::before
-    transform: scale(2)
-
 .v-slider-thumb--focused
   .v-slider-thumb__surface::before
-      opacity: $slider-thumb-focus-opacity
+    transform: scale(2)
+    opacity: $slider-thumb-focus-opacity
 
 .v-slider-thumb--pressed
   transition: none
@@ -142,6 +138,11 @@
   .v-slider-thumb__surface::before
     opacity: $slider-thumb-pressed-opacity
 
-.v-slider-thumb:hover:not(.v-slider-thumb--focused)
-  .v-slider-thumb__surface::before
-    opacity: $slider-thumb-hover-opacity
+@media (hover: hover)
+  .v-slider-thumb:hover
+    .v-slider-thumb__surface::before
+      transform: scale(2)
+
+  .v-slider-thumb:hover:not(.v-slider-thumb--focused)
+    .v-slider-thumb__surface::before
+      opacity: $slider-thumb-hover-opacity

package/lib/components/VSlider/VSliderTrack.css

@@ -44,16 +44,16 @@
   height: var(--v-slider-tick-size);
   transform: translate(calc(var(--v-slider-tick-size) / -2), calc(var(--v-slider-tick-size) / -2));
 }
-.v-slider-track__tick:first-child .v-slider-track__tick-label.v-locale--is-ltr, .v-locale--is-ltr .v-slider-track__tick:first-child .v-slider-track__tick-label {
+.v-slider-track__tick--first .v-slider-track__tick-label.v-locale--is-ltr, .v-locale--is-ltr .v-slider-track__tick--first .v-slider-track__tick-label {
   transform: none;
 }
-.v-slider-track__tick:first-child .v-slider-track__tick-label.v-locale--is-rtl, .v-locale--is-rtl .v-slider-track__tick:first-child .v-slider-track__tick-label {
+.v-slider-track__tick--first .v-slider-track__tick-label.v-locale--is-rtl, .v-locale--is-rtl .v-slider-track__tick--first .v-slider-track__tick-label {
   transform: translateX(100%);
 }
-.v-slider-track__tick:last-child .v-slider-track__tick-label.v-locale--is-ltr, .v-locale--is-ltr .v-slider-track__tick:last-child .v-slider-track__tick-label {
+.v-slider-track__tick--last .v-slider-track__tick-label.v-locale--is-ltr, .v-locale--is-ltr .v-slider-track__tick--last .v-slider-track__tick-label {
   transform: translateX(-100%);
 }
-.v-slider-track__tick:last-child .v-slider-track__tick-label.v-locale--is-rtl, .v-locale--is-rtl .v-slider-track__tick:last-child .v-slider-track__tick-label {
+.v-slider-track__tick--last .v-slider-track__tick-label.v-locale--is-rtl, .v-locale--is-rtl .v-slider-track__tick--last .v-slider-track__tick-label {
   transform: none;
 }
 
@@ -77,44 +77,44 @@
   height: inherit;
 }
 .v-slider.v-input--horizontal .v-slider-track__tick {
-  margin-block-start: calc(var(--v-slider-track-size) / 2 + 1px);
+  margin-top: calc(calc(var(--v-slider-track-size) + 2px) / 2);
 }
 .v-slider.v-input--horizontal .v-slider-track__tick.v-locale--is-rtl, .v-locale--is-rtl .v-slider.v-input--horizontal .v-slider-track__tick {
   transform: translate(calc(var(--v-slider-tick-size) / 2), calc(var(--v-slider-tick-size) / -2));
 }
-.v-slider.v-input--horizontal .v-slider-track__tick:first-child {
+.v-slider.v-input--horizontal .v-slider-track__tick .v-slider-track__tick-label {
+  margin-top: calc(var(--v-slider-track-size) / 2 + 8px);
+}
+.v-slider.v-input--horizontal .v-slider-track__tick .v-slider-track__tick-label.v-locale--is-ltr, .v-locale--is-ltr .v-slider.v-input--horizontal .v-slider-track__tick .v-slider-track__tick-label {
+  transform: translateX(-50%);
+}
+.v-slider.v-input--horizontal .v-slider-track__tick .v-slider-track__tick-label.v-locale--is-rtl, .v-locale--is-rtl .v-slider.v-input--horizontal .v-slider-track__tick .v-slider-track__tick-label {
+  transform: translateX(50%);
+}
+.v-slider.v-input--horizontal .v-slider-track__tick--first {
   margin-inline-start: calc(var(--v-slider-tick-size) + 1px);
 }
-.v-slider.v-input--horizontal .v-slider-track__tick:first-child .v-slider-track__tick-label.v-locale--is-ltr, .v-locale--is-ltr .v-slider.v-input--horizontal .v-slider-track__tick:first-child .v-slider-track__tick-label {
+.v-slider.v-input--horizontal .v-slider-track__tick--first .v-slider-track__tick-label.v-locale--is-ltr, .v-locale--is-ltr .v-slider.v-input--horizontal .v-slider-track__tick--first .v-slider-track__tick-label {
   transform: translateX(0%);
 }
-.v-slider.v-input--horizontal .v-slider-track__tick:first-child .v-slider-track__tick-label.v-locale--is-rtl, .v-locale--is-rtl .v-slider.v-input--horizontal .v-slider-track__tick:first-child .v-slider-track__tick-label {
+.v-slider.v-input--horizontal .v-slider-track__tick--first .v-slider-track__tick-label.v-locale--is-rtl, .v-locale--is-rtl .v-slider.v-input--horizontal .v-slider-track__tick--first .v-slider-track__tick-label {
   transform: translateX(0%);
 }
-.v-slider.v-input--horizontal .v-slider-track__tick:last-child {
+.v-slider.v-input--horizontal .v-slider-track__tick--last {
   margin-inline-start: calc(100% - var(--v-slider-tick-size) - 1px);
 }
-.v-slider.v-input--horizontal .v-slider-track__tick:last-child .v-slider-track__tick-label.v-locale--is-ltr, .v-locale--is-ltr .v-slider.v-input--horizontal .v-slider-track__tick:last-child .v-slider-track__tick-label {
+.v-slider.v-input--horizontal .v-slider-track__tick--last .v-slider-track__tick-label.v-locale--is-ltr, .v-locale--is-ltr .v-slider.v-input--horizontal .v-slider-track__tick--last .v-slider-track__tick-label {
   transform: translateX(-100%);
 }
-.v-slider.v-input--horizontal .v-slider-track__tick:last-child .v-slider-track__tick-label.v-locale--is-rtl, .v-locale--is-rtl .v-slider.v-input--horizontal .v-slider-track__tick:last-child .v-slider-track__tick-label {
+.v-slider.v-input--horizontal .v-slider-track__tick--last .v-slider-track__tick-label.v-locale--is-rtl, .v-locale--is-rtl .v-slider.v-input--horizontal .v-slider-track__tick--last .v-slider-track__tick-label {
   transform: translateX(100%);
 }
-.v-slider.v-input--horizontal .v-slider-track__tick .v-slider-track__tick-label {
-  bottom: calc((var(--v-slider-track-size) / -2) - 25px);
-}
-.v-slider.v-input--horizontal .v-slider-track__tick .v-slider-track__tick-label.v-locale--is-ltr, .v-locale--is-ltr .v-slider.v-input--horizontal .v-slider-track__tick .v-slider-track__tick-label {
-  transform: translateX(-50%);
-}
-.v-slider.v-input--horizontal .v-slider-track__tick .v-slider-track__tick-label.v-locale--is-rtl, .v-locale--is-rtl .v-slider.v-input--horizontal .v-slider-track__tick .v-slider-track__tick-label {
-  transform: translateX(50%);
-}
 
 .v-slider.v-input--vertical .v-slider-track {
   height: 100%;
   display: flex;
   justify-content: center;
-  width: calc(var(--v-slider-track-size, 2px) + 2px);
+  width: calc(var(--v-slider-track-size) + 2px);
   touch-action: pan-x;
 }
 .v-slider.v-input--vertical .v-slider-track__background {
@@ -127,17 +127,17 @@
   height: 100%;
 }
 .v-slider.v-input--vertical .v-slider-track__tick {
-  margin-inline-start: calc(var(--v-slider-track-size) / 2 + 1px);
+  margin-inline-start: calc(calc(var(--v-slider-track-size) + 2px) / 2);
   transform: translate(calc(var(--v-slider-tick-size) / -2), calc(var(--v-slider-tick-size) / 2));
 }
 .v-slider.v-input--vertical .v-slider-track__tick.v-locale--is-rtl, .v-locale--is-rtl .v-slider.v-input--vertical .v-slider-track__tick {
   transform: translate(calc(var(--v-slider-tick-size) / 2), calc(var(--v-slider-tick-size) / 2));
 }
-.v-slider.v-input--vertical .v-slider-track__tick:last-child {
-  inset-block-end: calc(0% + var(--v-slider-tick-size) + 1px);
+.v-slider.v-input--vertical .v-slider-track__tick--last {
+  bottom: calc(0% + var(--v-slider-tick-size) + 1px);
 }
 .v-slider.v-input--vertical .v-slider-track__tick .v-slider-track__tick-label {
-  margin-inline-start: calc(var(--v-slider-track-size) + 20px);
+  margin-inline-start: calc(var(--v-slider-track-size) / 2 + 12px);
   transform: translateY(-50%);
 }
 

package/lib/components/VSlider/VSliderTrack.mjs

@@ -8,7 +8,7 @@ import { useBackgroundColor } from "../../composables/color.mjs";
 import { useRounded } from "../../composables/rounded.mjs"; // Utilities
 
 import { computed, inject } from 'vue';
-import { convertToUnit, defineComponent } from "../../util/index.mjs";
+import { convertToUnit, defineComponent, useRender } from "../../util/index.mjs";
 export const VSliderTrack = defineComponent({
   name: 'VSliderTrack',
   props: {
@@ -30,16 +30,18 @@ export const VSliderTrack = defineComponent({
     const slider = inject(VSliderSymbol);
     if (!slider) throw new Error('[Vuetify] v-slider-track must be inside v-slider or v-range-slider');
     const {
+      color,
+      horizontalDirection,
+      parsedTicks,
+      rounded,
+      showTicks,
+      tickSize,
       trackColor,
       trackFillColor,
-      vertical,
-      tickSize,
-      showTicks,
       trackSize,
-      color,
-      rounded,
-      parsedTicks,
-      horizontalDirection
+      vertical,
+      min,
+      max
     } = slider;
     const {
       roundedClasses
@@ -70,26 +72,29 @@ export const VSliderTrack = defineComponent({
     const computedTicks = computed(() => {
       const ticks = vertical.value ? parsedTicks.value.slice().reverse() : parsedTicks.value;
       return ticks.map((tick, index) => {
-        var _slots$tickLabel, _slots$tickLabel2;
+        var _slots$tickLabel;
 
-        const directionProperty = vertical.value ? 'inset-block-end' : 'margin-inline-start';
+        const directionProperty = vertical.value ? 'bottom' : 'margin-inline-start';
+        const directionValue = tick.value !== min.value && tick.value !== max.value ? convertToUnit(tick.position, '%') : undefined;
         return _createVNode("div", {
           "key": tick.value,
           "class": ['v-slider-track__tick', {
-            'v-slider-track__tick--filled': tick.position >= props.start && tick.position <= props.stop
+            'v-slider-track__tick--filled': tick.position >= props.start && tick.position <= props.stop,
+            'v-slider-track__tick--first': tick.value === min.value,
+            'v-slider-track__tick--last': tick.value === max.value
           }],
           "style": {
-            [directionProperty]: tick.position > 0 && tick.position < 100 && convertToUnit(tick.position, '%')
+            [directionProperty]: directionValue
           }
         }, [(tick.label || slots['tick-label']) && _createVNode("div", {
           "class": "v-slider-track__tick-label"
-        }, [(_slots$tickLabel = (_slots$tickLabel2 = slots['tick-label']) == null ? void 0 : _slots$tickLabel2.call(slots, {
+        }, [((_slots$tickLabel = slots['tick-label']) == null ? void 0 : _slots$tickLabel.call(slots, {
           tick,
           index
-        })) != null ? _slots$tickLabel : tick.label])]);
+        })) ?? tick.label])]);
       });
     });
-    return () => {
+    useRender(() => {
       return _createVNode("div", {
         "class": ['v-slider-track', roundedClasses.value],
         "style": {
@@ -114,7 +119,8 @@ export const VSliderTrack = defineComponent({
           'v-slider-track__ticks--always-show': showTicks.value === 'always'
         }]
       }, [computedTicks.value])]);
-    };
+    });
+    return {};
   }
 
 });

package/lib/components/VSlider/VSliderTrack.mjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/VSlider/VSliderTrack.tsx"],"names":["VSliderSymbol","useBackgroundColor","useRounded","computed","inject","convertToUnit","defineComponent","VSliderTrack","name","props","start","type","Number","required","stop","emits","setup","slots","slider","Error","trackColor","trackFillColor","vertical","tickSize","showTicks","trackSize","color","rounded","parsedTicks","horizontalDirection","roundedClasses","backgroundColorClasses","trackFillColorClasses","backgroundColorStyles","trackFillColorStyles","trackColorClasses","trackColorStyles","startDir","value","endDir","backgroundStyles","trackFillWidth","trackFillStyles","computedTicks","ticks","slice","reverse","map","tick","index","directionProperty","position","label","direction","undefined"],"mappings":"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","sourcesContent":["// Styles\nimport './VSliderTrack.sass'\n\n// Components\nimport { VSliderSymbol } from './slider'\n\n// Composables\nimport { useBackgroundColor } from '@/composables/color'\nimport { useRounded } from '@/composables/rounded'\n\n// Utilities\nimport { computed, inject } from 'vue'\nimport { convertToUnit, defineComponent } from '@/util'\n\nexport const VSliderTrack = defineComponent({\n  name: 'VSliderTrack',\n\n  props: {\n    start: {\n      type: Number,\n      required: true,\n    },\n    stop: {\n      type: Number,\n      required: true,\n    },\n  },\n\n  emits: {},\n\n  setup (props, { slots }) {\n    const slider = inject(VSliderSymbol)\n\n    if (!slider) throw new Error('[Vuetify] v-slider-track must be inside v-slider or v-range-slider')\n\n    const {\n      trackColor,\n      trackFillColor,\n      vertical,\n      tickSize,\n      showTicks,\n      trackSize,\n      color,\n      rounded,\n      parsedTicks,\n      horizontalDirection,\n    } = slider\n\n    const { roundedClasses } = useRounded(rounded)\n\n    const {\n      backgroundColorClasses: trackFillColorClasses,\n      backgroundColorStyles: trackFillColorStyles,\n    } = useBackgroundColor(trackFillColor)\n\n    const {\n      backgroundColorClasses: trackColorClasses,\n      backgroundColorStyles: trackColorStyles,\n    } = useBackgroundColor(trackColor)\n\n    const startDir = computed(() => `inset-${vertical.value ? 'block-end' : 'inline-start'}`)\n    const endDir = computed(() => vertical.value ? 'height' : 'width')\n\n    const backgroundStyles = computed(() => {\n      return {\n        [startDir.value]: '0%',\n        [endDir.value]: '100%',\n      }\n    })\n\n    const trackFillWidth = computed(() => props.stop - props.start)\n\n    const trackFillStyles = computed(() => {\n      return {\n        [startDir.value]: convertToUnit(props.start, '%'),\n        [endDir.value]: convertToUnit(trackFillWidth.value, '%'),\n      }\n    })\n\n    const computedTicks = computed(() => {\n      const ticks = vertical.value ? parsedTicks.value.slice().reverse() : parsedTicks.value\n\n      return ticks.map((tick, index) => {\n        const directionProperty = vertical.value ? 'inset-block-end' : 'margin-inline-start'\n        return (\n          <div\n            key={ tick.value }\n            class={[\n              'v-slider-track__tick',\n              {\n                'v-slider-track__tick--filled': tick.position >= props.start && tick.position <= props.stop,\n              },\n            ]}\n            style={{\n              [directionProperty]: (tick.position > 0 && tick.position < 100) && convertToUnit(tick.position, '%'),\n            }}\n          >\n            {\n              (tick.label || slots['tick-label']) && (\n                <div class=\"v-slider-track__tick-label\">\n                  { slots['tick-label']?.({ tick, index }) ?? tick.label }\n                </div>\n              )\n            }\n          </div>\n        )\n      })\n    })\n\n    return () => {\n      return (\n        <div\n          class={[\n            'v-slider-track',\n            roundedClasses.value,\n          ]}\n          style={{\n            '--v-slider-track-size': convertToUnit(trackSize.value),\n            '--v-slider-tick-size': convertToUnit(tickSize.value),\n            direction: !vertical.value ? horizontalDirection.value : undefined,\n          }}\n        >\n          <div\n            class={[\n              'v-slider-track__background',\n              trackColorClasses.value,\n              {\n                'v-slider-track__background--opacity': !!color.value || !trackFillColor.value,\n              },\n            ]}\n            style={{\n              ...backgroundStyles.value,\n              ...trackColorStyles.value,\n            }}\n          />\n          <div\n            class={[\n              'v-slider-track__fill',\n              trackFillColorClasses.value,\n            ]}\n            style={{\n              ...trackFillStyles.value,\n              ...trackFillColorStyles.value,\n            }}\n          />\n\n          { showTicks.value && (\n            <div\n              class={[\n                'v-slider-track__ticks',\n                {\n                  'v-slider-track__ticks--always-show': showTicks.value === 'always',\n                },\n              ]}\n            >\n              { computedTicks.value }\n            </div>\n          ) }\n        </div>\n      )\n    }\n  },\n})\n\nexport type VSliderTrack = InstanceType<typeof VSliderTrack>\n"],"file":"VSliderTrack.mjs"}
+{"version":3,"file":"VSliderTrack.mjs","names":["VSliderSymbol","useBackgroundColor","useRounded","computed","inject","convertToUnit","defineComponent","useRender","VSliderTrack","name","props","start","type","Number","required","stop","emits","setup","slots","slider","Error","color","horizontalDirection","parsedTicks","rounded","showTicks","tickSize","trackColor","trackFillColor","trackSize","vertical","min","max","roundedClasses","backgroundColorClasses","trackFillColorClasses","backgroundColorStyles","trackFillColorStyles","trackColorClasses","trackColorStyles","startDir","value","endDir","backgroundStyles","trackFillWidth","trackFillStyles","computedTicks","ticks","slice","reverse","map","tick","index","directionProperty","directionValue","position","undefined","label","direction"],"sources":["../../../src/components/VSlider/VSliderTrack.tsx"],"sourcesContent":["// Styles\nimport './VSliderTrack.sass'\n\n// Components\nimport { VSliderSymbol } from './slider'\n\n// Composables\nimport { useBackgroundColor } from '@/composables/color'\nimport { useRounded } from '@/composables/rounded'\n\n// Utilities\nimport { computed, inject } from 'vue'\nimport { convertToUnit, defineComponent, useRender } from '@/util'\n\nexport const VSliderTrack = defineComponent({\n  name: 'VSliderTrack',\n\n  props: {\n    start: {\n      type: Number,\n      required: true,\n    },\n    stop: {\n      type: Number,\n      required: true,\n    },\n  },\n\n  emits: {},\n\n  setup (props, { slots }) {\n    const slider = inject(VSliderSymbol)\n\n    if (!slider) throw new Error('[Vuetify] v-slider-track must be inside v-slider or v-range-slider')\n\n    const {\n      color,\n      horizontalDirection,\n      parsedTicks,\n      rounded,\n      showTicks,\n      tickSize,\n      trackColor,\n      trackFillColor,\n      trackSize,\n      vertical,\n      min,\n      max,\n    } = slider\n\n    const { roundedClasses } = useRounded(rounded)\n\n    const {\n      backgroundColorClasses: trackFillColorClasses,\n      backgroundColorStyles: trackFillColorStyles,\n    } = useBackgroundColor(trackFillColor)\n\n    const {\n      backgroundColorClasses: trackColorClasses,\n      backgroundColorStyles: trackColorStyles,\n    } = useBackgroundColor(trackColor)\n\n    const startDir = computed(() => `inset-${vertical.value ? 'block-end' : 'inline-start'}`)\n    const endDir = computed(() => vertical.value ? 'height' : 'width')\n\n    const backgroundStyles = computed(() => {\n      return {\n        [startDir.value]: '0%',\n        [endDir.value]: '100%',\n      }\n    })\n\n    const trackFillWidth = computed(() => props.stop - props.start)\n\n    const trackFillStyles = computed(() => {\n      return {\n        [startDir.value]: convertToUnit(props.start, '%'),\n        [endDir.value]: convertToUnit(trackFillWidth.value, '%'),\n      }\n    })\n\n    const computedTicks = computed(() => {\n      const ticks = vertical.value ? parsedTicks.value.slice().reverse() : parsedTicks.value\n\n      return ticks.map((tick, index) => {\n        const directionProperty = vertical.value ? 'bottom' : 'margin-inline-start'\n        const directionValue = tick.value !== min.value && tick.value !== max.value ? convertToUnit(tick.position, '%') : undefined\n\n        return (\n          <div\n            key={ tick.value }\n            class={[\n              'v-slider-track__tick',\n              {\n                'v-slider-track__tick--filled': tick.position >= props.start && tick.position <= props.stop,\n                'v-slider-track__tick--first': tick.value === min.value,\n                'v-slider-track__tick--last': tick.value === max.value,\n              },\n            ]}\n            style={{ [directionProperty]: directionValue }}\n          >\n            {\n              (tick.label || slots['tick-label']) && (\n                <div class=\"v-slider-track__tick-label\">\n                  { slots['tick-label']?.({ tick, index }) ?? tick.label }\n                </div>\n              )\n            }\n          </div>\n        )\n      })\n    })\n\n    useRender(() => {\n      return (\n        <div\n          class={[\n            'v-slider-track',\n            roundedClasses.value,\n          ]}\n          style={{\n            '--v-slider-track-size': convertToUnit(trackSize.value),\n            '--v-slider-tick-size': convertToUnit(tickSize.value),\n            direction: !vertical.value ? horizontalDirection.value : undefined,\n          }}\n        >\n          <div\n            class={[\n              'v-slider-track__background',\n              trackColorClasses.value,\n              {\n                'v-slider-track__background--opacity': !!color.value || !trackFillColor.value,\n              },\n            ]}\n            style={{\n              ...backgroundStyles.value,\n              ...trackColorStyles.value,\n            }}\n          />\n          <div\n            class={[\n              'v-slider-track__fill',\n              trackFillColorClasses.value,\n            ]}\n            style={{\n              ...trackFillStyles.value,\n              ...trackFillColorStyles.value,\n            }}\n          />\n\n          { showTicks.value && (\n            <div\n              class={[\n                'v-slider-track__ticks',\n                {\n                  'v-slider-track__ticks--always-show': showTicks.value === 'always',\n                },\n              ]}\n            >\n              { computedTicks.value }\n            </div>\n          ) }\n        </div>\n      )\n    })\n\n    return {}\n  },\n})\n\nexport type VSliderTrack = InstanceType<typeof VSliderTrack>\n"],"mappings":"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"}

package/lib/components/VSlider/VSliderTrack.sass

@@ -1,5 +1,3 @@
-// Imports
-@forward './variables'
 @use 'sass:map'
 @use 'sass:selector'
 @use '../../styles/settings'
@@ -49,14 +47,14 @@
   height: var(--v-slider-tick-size)
   transform: translate(calc(var(--v-slider-tick-size) / -2), calc(var(--v-slider-tick-size) / -2))
 
-  &:first-child .v-slider-track__tick-label
+  &--first .v-slider-track__tick-label
     @include tools.ltr()
       transform: none
 
     @include tools.rtl()
       transform: translateX(100%)
 
-  &:last-child .v-slider-track__tick-label
+  &--last .v-slider-track__tick-label
     @include tools.ltr()
       transform: translateX(-100%)
 
@@ -74,7 +72,7 @@
     display: flex
     align-items: center
     width: 100%
-    height: calc(var(--v-slider-track-size) + 2px)
+    height: $slider-track-active-size
     touch-action: pan-y
 
     &__background
@@ -84,12 +82,21 @@
       height: inherit
 
   .v-slider-track__tick
-    margin-block-start: calc((var(--v-slider-track-size) / 2) + 1px)
+    margin-top: calc(#{$slider-track-active-size} / 2)
 
     @include tools.rtl()
       transform: translate(calc(var(--v-slider-tick-size) / 2), calc(var(--v-slider-tick-size) / -2))
 
-    &:first-child
+    .v-slider-track__tick-label
+      margin-top: calc(var(--v-slider-track-size) / 2 + #{$slider-tick-label-margin-top})
+
+      @include tools.ltr()
+        transform: translateX(-50%)
+
+      @include tools.rtl()
+        transform: translateX(50%)
+
+    &--first
       margin-inline-start: calc(var(--v-slider-tick-size) + 1px)
 
       .v-slider-track__tick-label
@@ -99,7 +106,7 @@
         @include tools.rtl()
           transform: translateX(0%)
 
-    &:last-child
+    &--last
       margin-inline-start: calc(100% - var(--v-slider-tick-size) - 1px)
 
       .v-slider-track__tick-label
@@ -109,22 +116,13 @@
         @include tools.rtl()
           transform: translateX(100%)
 
-    .v-slider-track__tick-label
-      bottom: calc((var(--v-slider-track-size) / -2) - #{$slider-tick-label-margin-bottom})
-
-      @include tools.ltr()
-        transform: translateX(-50%)
-
-      @include tools.rtl()
-        transform: translateX(50%)
-
 // Vertical
 .v-slider.v-input--vertical
   .v-slider-track
     height: 100%
     display: flex
     justify-content: center
-    width: calc(var(--v-slider-track-size, $slider-track-width) + 2px)
+    width: $slider-track-active-size
     touch-action: pan-x
 
     &__background
@@ -137,17 +135,17 @@
     height: 100%
 
   .v-slider-track__tick
-    margin-inline-start: calc((var(--v-slider-track-size) / 2) + 1px)
+    margin-inline-start: calc(#{$slider-track-active-size} / 2)
     transform: translate(calc(var(--v-slider-tick-size) / -2), calc(var(--v-slider-tick-size) / 2))
 
     @include tools.rtl()
       transform: translate(calc(var(--v-slider-tick-size) / 2), calc(var(--v-slider-tick-size) / 2))
 
-    &:last-child
-      inset-block-end: calc(0% + var(--v-slider-tick-size) + 1px)
+    &--last
+      bottom: calc(0% + var(--v-slider-tick-size) + 1px)
 
     .v-slider-track__tick-label
-      margin-inline-start: calc(var(--v-slider-track-size) + 20px)
+      margin-inline-start: calc(var(--v-slider-track-size) / 2 + #{$slider-tick-label-margin-start})
       transform: translateY(-50%)
 
 // Modifiers

package/lib/components/VSlider/_variables.scss

@@ -1,9 +1,9 @@
 @use '../../styles/settings';
 @use '../../styles/tools';
 
-$slider-horizontal-left: 8px !default;
+$slider-horizontal-start: 8px !default;
 $slider-horizontal-min-height: 32px !default;
-$slider-horizontal-right: 8px !default;
+$slider-horizontal-end: 8px !default;
 $slider-label-margin-end: 12px !default;
 $slider-label-margin-start: 12px !default;
 $slider-state-track-background-opacity: 0.4 !default;
@@ -22,10 +22,13 @@ $slider-thumb-label-transition: .2s settings.$accelerated-easing !default;
 $slider-thumb-label-padding: 6px !default;
 $slider-thumb-touch-size: 42px !default;
 $slider-tick-border-radius: 2px !default;
-$slider-tick-label-margin-bottom: 25px !default;
+$slider-tick-label-margin-top: 8px !default;
+$slider-tick-label-margin-start: 12px !default;
 $slider-track-border-radius: 6px !default;
-$slider-track-width: 2px !default;
+$slider-track-active-size-offset: 2px !default;
 $slider-transition: .3s cubic-bezier(0.25, 0.8, 0.5, 1) !default;
 $slider-vertical-margin-bottom: 12px !default;
 $slider-vertical-margin-top: 12px !default;
 $slider-vertical-min-height: 300px !default;
+
+$slider-track-active-size: calc(var(--v-slider-track-size) + #{$slider-track-active-size-offset}) !default;