{"record":{"id":"8ff35878cf65fae3","repo":"vuetifyjs/vuetify","slug":"vuetify-v-slider-thumb-must-be-used-inside-v-sli","errorCode":null,"errorMessage":"[Vuetify] v-slider-thumb must be used inside v-slider or v-range-slider","messagePattern":"\\[Vuetify\\] v-slider-thumb must be used inside v-slider or v-range-slider","errorType":"exception","errorClass":"Error","httpStatus":null,"severity":"error","filePath":"packages/vuetify/src/components/VSlider/VSliderThumb.tsx","lineNumber":71,"sourceCode":"\n  ...makeComponentProps(),\n}, 'VSliderThumb')\n\nexport const VSliderThumb = genericComponent<VSliderThumbSlots>()({\n  name: 'VSliderThumb',\n\n  directives: { vRipple },\n\n  props: makeVSliderThumbProps(),\n\n  emits: {\n    'update:modelValue': (v: number) => true,\n  },\n\n  setup (props, { slots, emit }) {\n    const slider = inject(VSliderSymbol)\n    const { isRtl, rtlClasses } = useRtl()\n    if (!slider) throw new Error('[Vuetify] v-slider-thumb must be used inside v-slider or v-range-slider')\n\n    const {\n      min,\n      max,\n      thumbColor,\n      thumbLabelColor,\n      step,\n      disabled,\n      thumbSize,\n      thumbLabel,\n      direction,\n      isReversed,\n      vertical,\n      readonly,\n      elevation,\n      mousePressed,\n      decimals,\n      indexFromEnd,","sourceCodeStart":53,"sourceCodeEnd":89,"githubUrl":"https://github.com/vuetifyjs/vuetify/blob/8d153908dffb7592eb389ddbfbab955a0ccc977f/packages/vuetify/src/components/VSlider/VSliderThumb.tsx#L53-L89","documentation":"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.","triggerScenarios":"Rendering <v-slider-thumb> outside <v-slider>/<v-range-slider>; teleporting the thumb out of the slider tree; testing it in isolation.","commonSituations":"Attempting to compose a custom slider from sub-parts manually; copy-paste of a thumb element; refactoring that detaches the thumb.","solutions":["Use <v-slider-thumb> only inside <v-slider> or <v-range-slider> (normally just use the slider component, which renders its own thumb).","Keep any teleported thumb nodes inside the slider provide tree.","Wrap the thumb in <v-slider> for tests."],"exampleFix":"// before\n<v-slider-thumb />\n\n// after\n<v-slider />\n<!-- v-slider renders its thumb internally -->","handlingStrategy":"type-guard","validationCode":"import { inject } from 'vue'\nimport { VSliderSymbol } from 'vuetify'\nconst slider = inject(VSliderSymbol, null)\nif (!slider) {\n  // not inside a slider: render a plain draggable element instead\n}","typeGuard":"import { inject } from 'vue'\nimport { VSliderSymbol } from 'vuetify'\nexport function isInsideSlider (): boolean {\n  return inject(VSliderSymbol, null) != null\n}","tryCatchPattern":null,"preventionTips":["Render <v-slider-thumb> only inside <v-slider>/<v-range-slider>.","Use the slider component directly rather than assembling sub-parts.","Wrap the thumb in <v-slider> for tests."],"tags":["injection","slider","components"],"backgroundTag":null,"analyzedSha":"8d153908dffb7592eb389ddbfbab955a0ccc977f","analyzedAt":"2026-08-12T21:54:20.596Z","schemaVersion":2},"datasetVersion":"2026-08-13T04:17:16.726Z"}