The slider stays in the middle and doesn't move at all.

• Version Info
  • Vue 3.2.45
  • Vuetify 3.1.0
  • Vite 4.0.0

<script>
export default {
  data: () => ({
    slider1: 0,
    slider2: 50,
    slider3: 100,
  }),
};
</script>

<template>
  <div>
    <v-card>
      <v-slider v-model="slider1"></v-slider>
      <v-slider v-model="slider2"></v-slider>
      <v-slider v-model="slider3"></v-slider>
    </v-card>
  </div>
</template>

Here is a reproduction link. https://play.vuetifyjs.com/#eNqVUttSwyAQ/ZUdnuxMA73YF0w79TtKH2Kgig2EARJ1Ov13NyR2elFHn2DP7p49HHZzII/O0bZRhJM8lF67uBJWvbvaR5BqVzRVhIOwALKIBYe7ESxXcJcQgFBpqfyUw2R8Dsw4LC6ROYfppIeOIzyOD8Lm7DQPg6iMq4qoMALIpW7TBa9tVhZeDlGKe0poM1NLVS0FGWQIssrZV/oPDbP/Nsy/a iAk8Kc9cpzdvYeMibadIZmpnD0NdQWzU4OiiERBOG9yx2Gv9HFgrzE6AJnrLFu/0zL2rA15phvbNRGZbI26zmd0fsFTg3xHKcqmOzJ129BeZwoyPAbiTzq3cdPA4Y08k7ppKcdoI7yhoohf6t85pVFR5T/VfdV7YX2q9yN/rQ5uDfoZaXtPlzZWIZk4WbblRzHpKfG4vQOsv0EPDvxww==

CodePudding user response：

In order for your application to work properly, you must wrap it in a v-app component. This component is required for ensuring proper cross-browser compatibility.

<v-app>
  <v-card>
    <v-slider v-model="slider1"></v-slider>
    <v-slider v-model="slider2"></v-slider>
    <v-slider v-model="slider3"></v-slider>
  </v-card>
</v-app>