feat(VSlider): add variant "pill" to align with MD3

packages/api-generator/src/locale/en/Slider.json

@@ -5,15 +5,18 @@
     "noKeyboard": "**FOR INTERNAL USE ONLY** Ignore keyboard events.",
     "reverse": "Reverses the slider direction.",
     "showTicks": "Show track ticks. If `true` it shows ticks when using slider. If set to `'always'` it always shows ticks.",
+    "size": "Sets the MD3 size of the **pill** variant: track, handle, corner radius and inner icon size.",
     "step": "If greater than 0, sets step interval for ticks.",
     "thumbColor": "Sets the thumb and thumb label color.",
+    "thumbGap": "Space between the handle and the track segments in the **pill** variant.",
     "thumbLabel": "Show thumb label. If `true` it shows label when using slider. If set to `'always'` it always shows label. Use `'hover'` to show label when hovering over the thumb.",
-    "thumbSize": "Controls the size of the thumb label.",
+    "thumbSize": "Controls the size of the thumb.",
     "ticks": "Show track ticks. If `true` it shows ticks when using slider. If set to `'always'` it always shows ticks.",
     "tickSize": "Controls the size of **ticks**",
     "trackColor": "Sets the track's color",
     "trackFillColor": "Sets the track's fill color",
-    "trackSize": "Sets the track's size (height).",
-    "valueFormat": "Formatter for the thumb label and `aria-valuetext`. Use `[value]`, `[max]` and `[percent]` as placeholders in strings, or pass a function that receives `{ value, max, percent }` and returns a string."
+    "trackSize": "Sets the track's size (height). In the **pill** variant it overrides only the track; the rest still follows **size**.",
+    "valueFormat": "Formatter for the thumb label and `aria-valuetext`. Use `[value]`, `[max]` and `[percent]` as placeholders in strings, or pass a function that receives `{ value, max, percent }` and returns a string.",
+    "variant": "`pill` follows MD3 with a thick track, a bar-shaped thumb and gaps on both sides of it."
   }
 }

packages/api-generator/src/locale/en/VMediaProgressBar.json

@@ -10,6 +10,7 @@
     "readonly": "Bar stays focusable, but does not react to pointer or keyboard.",
     "step": "Seconds moved by the arrow keys. Shift multiplies it by 10, or pass `[step, shiftStep]` to set both. Page Up and Page Down move by 10% of **max**.",
     "thumb": "Shows the thumb at the current position.",
+    "thumbGap": "Space between the handle and the track in the `pill` and `wavy` variants.",
     "thumbSize": "Size of the thumb.",
     "tooltip": "Shows the time under the pointer. Accepts an object with `location` (`top` or `bottom`) and `offset`.",
     "variant": "`pill` follows MD3 with a bar-shaped thumb. `wavy` additionally draws the played part as a wave."

packages/api-generator/src/locale/en/VSlider.json

@@ -1,6 +1,12 @@
 {
   "description": "Form input used to select single number from the linear range. A simple alternative to a standard number input.",
+  "props": {
+    "appendInnerIcon": "Creates a [v-icon](/api/v-icon/) inside the end of the track. Requires the **pill** variant.",
+    "prependInnerIcon": "Creates a [v-icon](/api/v-icon/) inside the start of the track. Requires the **pill** variant."
+  },
   "slots": {
+    "append-inner": "Slot for content inside the end of the track. Requires the **pill** variant.",
+    "prepend-inner": "Slot for content inside the start of the track. Requires the **pill** variant.",
     "thumb-label": "Slot for the thumb label.",
     "tick-label": "Slot for the tick label."
   },

packages/docs/src/data/new-in.json

@@ -556,8 +556,11 @@
     },
     "props": {
       "endThumbAriaLabel": "4.3.0",
+      "size": "4.3.0",
       "startThumbAriaLabel": "4.3.0",
-      "valueFormat": "4.3.0"
+      "thumbGap": "4.3.0",
+      "valueFormat": "4.3.0",
+      "variant": "4.3.0"
     }
   },
   "VRating": {
@@ -635,7 +638,16 @@
       "end": "3.2.0"
     },
     "props": {
-      "valueFormat": "4.3.0"
+      "appendInnerIcon": "4.3.0",
+      "prependInnerIcon": "4.3.0",
+      "size": "4.3.0",
+      "thumbGap": "4.3.0",
+      "valueFormat": "4.3.0",
+      "variant": "4.3.0"
+    },
+    "slots": {
+      "append-inner": "4.3.0",
+      "prepend-inner": "4.3.0"
     }
   },
   "VSlideGroup": {

packages/vuetify/src/components/VColorPicker/VColorPickerPreview.sass

@@ -1,27 +1,20 @@
+@use 'sass:list'
 @use '../../styles/tools'
 @use './variables' as *
 
 @include tools.layer('components')
   .v-color-picker-preview__alpha
-    .v-slider-track__background
+    .v-slider-track__background,
+    .v-slider-track__fill
       @include tools.layer('overrides')
         background-color: transparent
+        background-size: var(--v-slider-track-length, 100%) 100%, auto
+        background-repeat: no-repeat, repeat
 
       @include tools.ltr()
-        background-image: linear-gradient(to right, transparent, var(--v-color-picker-color-hsv))
+        background-image: linear-gradient(to right, transparent, var(--v-color-picker-color-hsv)), list.nth($color-picker-checkerboard, 1)
       @include tools.rtl()
-        background-image: linear-gradient(to left, transparent, var(--v-color-picker-color-hsv))
-
-      &::after
-        content: ''
-        z-index: -1
-        left: 0
-        top: 0
-        width: 100%
-        height: 100%
-        position: absolute
-        background: $color-picker-checkerboard
-        border-radius: inherit
+        background-image: linear-gradient(to left, transparent, var(--v-color-picker-color-hsv)), list.nth($color-picker-checkerboard, 1)
 
   .v-color-picker-preview__sliders
     display: flex
@@ -44,12 +37,13 @@
 
   .v-color-picker-preview__hue
     &:not(.v-input--is-disabled)
-      .v-slider-track__background
+      .v-slider-track__background,
+      .v-slider-track__fill
         @include tools.ltr()
-          background: linear-gradient(to right, #F00 0%, #FF0 16.66%, #0F0 33.33%, #0FF 50%, #00F 66.66%, #F0F 83.33%, #F00 100%)
+          background-image: linear-gradient(to right, #F00 0%, #FF0 16.66%, #0F0 33.33%, #0FF 50%, #00F 66.66%, #F0F 83.33%, #F00 100%)
 
         @include tools.rtl()
-          background: linear-gradient(to left, #F00 0%, #FF0 16.66%, #0F0 33.33%, #0FF 50%, #00F 66.66%, #F0F 83.33%, #F00 100%)
+          background-image: linear-gradient(to left, #F00 0%, #FF0 16.66%, #0F0 33.33%, #0FF 50%, #00F 66.66%, #F0F 83.33%, #F00 100%)
 
   .v-color-picker-preview__track
     position: relative
@@ -58,7 +52,10 @@
     @include tools.layer('overrides')
       margin: 0
 
-    .v-slider-track__fill
+    &:not(.v-slider--variant-pill) .v-slider-track__fill
+      display: none
+
+    .v-slider-track__stop
       display: none
 
   .v-color-picker-preview

packages/vuetify/src/components/VRangeSlider/VRangeSlider.tsx

@@ -16,7 +16,7 @@ import { useProxiedModel } from '@/composables/proxiedModel'
 
 // Utilities
 import { computed, ref } from 'vue'
-import { filterInputAttrs, genericComponent, omit, propsFactory, useRender } from '@/util'
+import { convertToUnit, filterInputAttrs, genericComponent, omit, propsFactory, useRender } from '@/util'
 
 // Types
 import type { PropType, WritableComputedRef } from 'vue'
@@ -98,8 +98,10 @@ export const VRangeSlider = genericComponent<VSliderSlots>()({
       onSliderTouchstart,
       position,
       trackContainerRef,
+      trackSize,
       disabled,
       readonly,
+      getThumbState,
     } = useSlider({
       props,
       steps,
@@ -171,6 +173,8 @@ export const VRangeSlider = genericComponent<VSliderSlots>()({
               'v-slider--focused': isFocused.value,
               'v-slider--pressed': mousePressed.value,
               'v-slider--disabled': disabled.value,
+              [`v-slider--variant-${props.variant}`]: props.variant !== 'default',
+              [`v-slider--size-${props.size}`]: props.variant === 'pill',
             },
             rtlClasses.value,
             props.class,
@@ -202,6 +206,10 @@ export const VRangeSlider = genericComponent<VSliderSlots>()({
             default: ({ id, messagesId }) => (
               <div
                 class="v-slider__container"
+                style={{
+                  '--v-slider-track-size': convertToUnit(trackSize.value),
+                  '--v-slider-thumb-gap': convertToUnit(props.thumbGap),
+                }}
                 role="group"
                 aria-label={ inputAttrs['aria-label'] as string | undefined }
                 aria-labelledby={ (inputAttrs['aria-labelledby'] as string | undefined) ?? (hasLabelElement ? `${id.value}_label` : undefined) }
@@ -230,6 +238,8 @@ export const VRangeSlider = genericComponent<VSliderSlots>()({
                   ref={ trackContainerRef }
                   start={ trackStart.value }
                   stop={ trackStop.value }
+                  startThumb={ getThumbState(activeThumbRef.value === startThumbRef.value?.$el) }
+                  stopThumb={ getThumbState(activeThumbRef.value === stopThumbRef.value?.$el) }
                 >
                   {{ 'tick-label': slots['tick-label'] }}
                 </VSliderTrack>

packages/vuetify/src/components/VSlider/VSlider.sass

@@ -22,6 +22,7 @@
 
   // Elements
   .v-slider__container
+    --v-slider-track-size: #{$slider-track-size}
     position: relative
     min-height: inherit
     width: 100%
@@ -69,3 +70,73 @@
 
   .v-slider__label
     margin-inline-end: $slider-label-margin-end
+
+  // Pill variant
+  @each $name, $tokens in $slider-pill-sizes
+    .v-slider--variant-pill.v-slider--size-#{$name} .v-slider__container
+      --v-slider-track-size: #{map.get($tokens, track-size)}
+      --v-slider-pill-handle-height: #{map.get($tokens, handle-height)}
+      --v-slider-pill-track-radius: #{map.get($tokens, track-radius)}
+      --v-slider-pill-icon-size: #{map.get($tokens, icon-size)}
+
+  // Declared where they are read, so --v-slider-thumb-gap can come from any ancestor
+  .v-slider--variant-pill
+    .v-slider-track,
+    .v-slider__inner-icon
+      --v-slider-pill-idle-clearance: calc(#{$slider-pill-thumb-width} / 2 + var(--v-slider-thumb-gap, #{$slider-pill-thumb-gap}))
+      --v-slider-pill-active-clearance: calc(#{$slider-pill-active-thumb-width} / 2 + var(--v-slider-thumb-gap, #{$slider-pill-thumb-gap}))
+
+  .v-slider--has-prepend-inner.v-slider--variant-pill .v-slider-track__stop--start,
+  .v-slider--has-append-inner.v-slider--variant-pill .v-slider-track__stop--end
+    display: none
+
+  .v-slider--has-prepend-inner,
+  .v-slider--has-append-inner
+    .v-slider__inner-icon
+      position: absolute
+      display: flex
+      align-items: center
+      justify-content: center
+      pointer-events: none
+
+      > .v-icon
+        font-size: var(--v-slider-pill-icon-size)
+
+      &--filled > *
+        color: $slider-pill-inner-icon-filled-color
+
+    &.v-input--horizontal .v-slider__inner-icon
+      inset-block: 0
+      margin-block: auto
+      width: calc(var(--v-slider-pill-icon-size) + #{$slider-pill-inner-icon-inset} * 2)
+      height: var(--v-slider-pill-icon-size)
+
+      &--prepend
+        inset-inline-start: 0
+
+        &.v-slider__inner-icon--flipped
+          inset-inline-start: calc(var(--v-slider-inner-icon-position) + var(--v-slider-pill-idle-clearance) - #{$slider-pill-inner-icon-inset})
+
+      &--append
+        inset-inline-end: 0
+
+        &.v-slider__inner-icon--flipped
+          inset-inline-end: calc(100% - var(--v-slider-inner-icon-position) + var(--v-slider-pill-idle-clearance) - #{$slider-pill-inner-icon-inset})
+
+    &.v-input--vertical .v-slider__inner-icon
+      inset-inline: 0
+      margin-inline: auto
+      width: var(--v-slider-pill-icon-size)
+      height: calc(var(--v-slider-pill-icon-size) + #{$slider-pill-inner-icon-inset} * 2)
+
+      &--prepend
+        bottom: 0
+
+        &.v-slider__inner-icon--flipped
+          bottom: calc(var(--v-slider-inner-icon-position) + var(--v-slider-pill-idle-clearance) - #{$slider-pill-inner-icon-inset})
+
+      &--append
+        top: 0
+
+        &.v-slider__inner-icon--flipped
+          top: calc(100% - var(--v-slider-inner-icon-position) + var(--v-slider-pill-idle-clearance) - #{$slider-pill-inner-icon-inset})