vuetifyjs/vuetify · error · Error

[Vuetify] v-slider-track must be inside v-slider or v-range-

Error message

[Vuetify] v-slider-track must be inside v-slider or v-range-slider

What it means

VSliderTrack injects VSliderSymbol, provided only by <v-slider> and <v-range-slider>. It throws when <v-slider-track> is rendered outside either, because the track reads color, ticks, size, and bounds from the parent slider.

Source

Thrown at packages/vuetify/src/components/VSlider/VSliderTrack.tsx:46

  stop: {
    type: Number,
    required: true,
  },

  ...makeComponentProps(),
}, 'VSliderTrack')

export const VSliderTrack = genericComponent<VSliderTrackSlots>()({
  name: 'VSliderTrack',

  props: makeVSliderTrackProps(),

  emits: {},

  setup (props, { slots }) {
    const slider = inject(VSliderSymbol)

    if (!slider) throw new Error('[Vuetify] v-slider-track must be inside v-slider or v-range-slider')

    const {
      color,
      parsedTicks,
      rounded,
      showTicks,
      tickSize,
      trackColor,
      trackFillColor,
      trackSize,
      vertical,
      min,
      max,
      indexFromEnd,
    } = slider

    const { roundedClasses, roundedStyles } = useRounded(rounded)

View on GitHub (pinned to 8d153908df)

Solutions

1. Use <v-slider-track> only inside <v-slider> or <v-range-slider> (the slider renders its own track).
2. Keep teleported track nodes inside the slider provide tree.
3. Wrap the track in <v-slider> for tests.

Example fix

// before
<v-slider-track />

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

import { inject } from 'vue'
import { VSliderSymbol } from 'vuetify'
const slider = inject(VSliderSymbol, null)
if (!slider) {
  // not inside a slider: render a plain track div 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-track> outside <v-slider>/<v-range-slider>; teleporting it out of the slider tree; testing it alone.

Common situations: Composing a custom slider from sub-parts; copy-paste of a track element; refactoring that detaches the track.

Related errors

• [Vuetify] v-slider-thumb must be used inside v-slider or v-r
• [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/ce8b3be528227973. Report an issue: GitHub.