vuetifyjs/vuetify · error · Error

[Vuetify] v-slider-thumb must be used inside v-slider or v-r

Error message

[Vuetify] v-slider-thumb must be used inside v-slider or v-range-slider

What it means

VSliderThumb injects VSliderSymbol, provided only by <v-slider> and <v-range-slider>. It throws when <v-slider-thumb> is rendered outside either, because the thumb depends on the parent's min/max/step/direction/track state.

Source

Thrown at packages/vuetify/src/components/VSlider/VSliderThumb.tsx:71

  ...makeComponentProps(),
}, 'VSliderThumb')

export const VSliderThumb = genericComponent<VSliderThumbSlots>()({
  name: 'VSliderThumb',

  directives: { vRipple },

  props: makeVSliderThumbProps(),

  emits: {
    'update:modelValue': (v: number) => true,
  },

  setup (props, { slots, emit }) {
    const slider = inject(VSliderSymbol)
    const { isRtl, rtlClasses } = useRtl()
    if (!slider) throw new Error('[Vuetify] v-slider-thumb must be used inside v-slider or v-range-slider')

    const {
      min,
      max,
      thumbColor,
      thumbLabelColor,
      step,
      disabled,
      thumbSize,
      thumbLabel,
      direction,
      isReversed,
      vertical,
      readonly,
      elevation,
      mousePressed,
      decimals,
      indexFromEnd,

View on GitHub (pinned to 8d153908df)

Solutions

1. Use <v-slider-thumb> only inside <v-slider> or <v-range-slider> (normally just use the slider component, which renders its own thumb).
2. Keep any teleported thumb nodes inside the slider provide tree.
3. Wrap the thumb in <v-slider> for tests.

Example fix

// before
<v-slider-thumb />

// after
<v-slider />
<!-- v-slider renders its thumb internally -->

import { inject } from 'vue'
import { VSliderSymbol } from 'vuetify'
const slider = inject(VSliderSymbol, null)
if (!slider) {
  // not inside a slider: render a plain draggable element instead
}

import { inject } from 'vue'
import { VSliderSymbol } from 'vuetify'
export function isInsideSlider (): boolean {
  return inject(VSliderSymbol, null) != null
}

When it happens

Trigger: Rendering <v-slider-thumb> outside <v-slider>/<v-range-slider>; teleporting the thumb out of the slider tree; testing it in isolation.

Common situations: Attempting to compose a custom slider from sub-parts manually; copy-paste of a thumb element; refactoring that detaches the thumb.

Related errors

• [Vuetify] v-slider-track must be inside v-slider or v-range-
• [Vuetify] v-expansion-panel-text needs to be placed inside v
• [Vuetify] v-expansion-panel-title needs to be placed inside
• [Vuetify] VOtpField must be used inside VOtpInput
• [Vuetify] VWindowItem must be used inside VWindow

AI-assisted analysis of vuetifyjs/vuetify@8d153908df (2026-08-12). Data as JSON: /api/errors/8ff35878cf65fae3. Report an issue: GitHub.