【Vuetify】垂直（縦向き）スライダーの長さを変更する

Vuetifyのv-sliderコンポーネントについて、個人的に詰まった点があったので備忘録として書いておきます。一度このフレーズを使ってみたかった

はじめに

Vuetifyではスライダー・コンポーネントを提供しており、verticalプロパティをtrueに設定することでスライダーの向きを縦にすることが可能です。

コード

App.vue

<template>
  <v-app>
    <v-main>
      <v-card class="mx-5 my-5 px-2 py-2">
        <v-slider v-model="value_x" label="水平"></v-slider>
      </v-card>
      <v-card class="mx-5 my-5 px-2 py-2">
        <v-slider v-model="value_y" vertical label="垂直"></v-slider>
      </v-card>
    </v-main>
  </v-app>
</template>

<script>
export default {
  name: "App",

  data: () => ({
    value_x: 0,
    value_y: 0,
  }),
};
</script>

結果

通常の横向きスライダーであれば、親コンポーネントの幅を変更したり、classでスタイルを設定してやることによってスライダーの長さを変更することができますが、縦向きスライダーでは同じ方法を使っても長さを変更することができません。

親コンポーネントのサイズを変更した例

コード

App.vue

<template>
  <v-app>
    <v-main>
      <!-- v-cardのwidthを固定値に設定 -->
      <v-card class="mx-5 my-5 px-2 py-2" width="500">
        <v-slider v-model="value_x" label="水平"></v-slider>
      </v-card>
      <!-- v-cardのheightを固定値に設定 -->
      <v-card class="mx-5 my-5 px-2 py-2" height="500">
        <v-slider v-model="value_y" vertical label="垂直"></v-slider>
      </v-card>
    </v-main>
  </v-app>
</template>

<script>
export default {
  name: "App",

  data: () => ({
    value_x: 0,
    value_y: 0,
  }),
};
</script>

結果

classでスタイルを変更した例

コード

App.vue

<template>
  <v-app>
    <v-main>
      <v-card class="mx-5 my-5 px-2 py-2">
        <!-- v-sliderのwidthをclassで設定 -->
        <v-slider v-model="value_x" label="水平" class="horizontal"></v-slider>
      </v-card>
      <v-card class="mx-5 my-5 px-2 py-2">
        <!-- v-sliderのheightをclassで設定 -->
        <v-slider v-model="value_y" vertical label="垂直" class="vertical"></v-slider>
      </v-card>
    </v-main>
  </v-app>
</template>

<script>
export default {
  name: "App",

  data: () => ({
    value_x: 0,
    value_y: 0,
  }),
};
</script>

<style scoped>
.horizontal {
  width: 500px;
}
.vertical {
  height: 500px;
}
</style>

結果

垂直スライダーの長さを設定するにはどうすればいい

どうやら下記のように、.v-sliderを継承したスタイルをclassに与えることで縦向きスライダーの長さを設定できるらしいです。なんでだろ

コード

App.vue

<template>
  <v-app>
    <v-main>
      <v-card class="mx-5 my-5 px-2 py-2">
        <!-- v-sliderのwidthをclassで設定 -->
        <v-slider v-model="value_x" label="水平" class="horizontal"></v-slider>
      </v-card>
      <v-card class="mx-5 my-5 px-2 py-2">
        <!-- v-sliderのheightをclassで設定 -->
        <v-slider
          v-model="value_y"
          vertical
          label="垂直"
          class="new_vertical"
        ></v-slider>
      </v-card>
    </v-main>
  </v-app>
</template>

<script>
export default {
  name: "App",

  data: () => ({
    value_x: 0,
    value_y: 0,
  }),
};
</script>

<style scoped>
.horizontal {
  width: 500px;
}
/* .v-sliderを継承したクラスを作成 */
.new_vertical >>> .v-slider {
  height: 500px;
}
</style>

結果

いかがでしたか？みなさんも縦向きスライダーの長さを変更したくなった際は上記の方法を使ってみるといいと思います。

参考

余談

この記事は東京高専プロコンゼミ② Advent Calendar 2022の24日目の記事です。②の方はついに自分以外参加者が現れなかったのでとても悲しい😥