Vuetify - Настроить слайдер

Vuetify - популярный UI-фреймворк для приложений Vue.

В этой статье мы рассмотрим, как работать с фреймворком Vuetify.

Отключенный слайдер

Мы можем отключить ползунок с помощью опоры disabled:

<template>
  <v-container>
    <v-row>
      <v-col col="12">
        <v-slider disabled label="Disabled" value="30"></v-slider>
      </v-col>
    </v-row>
  </v-container>
</template>
<script>
export default {
  name: "HelloWorld",
  data: () => ({}),
};
</script>

Ползунок только для чтения

Ползунок также можно отключить с помощью свойства readonly. Разница между disabled и readonly в том, что слайдер только для чтения выглядит обычным.

Например, мы можем написать:

<template>
  <v-container>
    <v-row>
      <v-col col="12">
        <v-slider readonly label="Disabled" value="30"></v-slider>
      </v-col>
    </v-row>
  </v-container>
</template>
<script>
export default {
  name: "HelloWorld",
  data: () => ({}),
};
</script>

Иконки

Иконки можно добавлять в слайдер.

Например, мы можем написать:

<template>
  <v-container>
    <v-row>
      <v-col col="12">
        <v-slider v-model="sound" prepend-icon="mdi-plus"></v-slider>
      </v-col>
    </v-row>
  </v-container>
</template>
<script>
export default {
  name: "HelloWorld",
  data: () => ({
    sound: 0,
  }),
};
</script>

чтобы добавить значок слева от ползунка с опорой prepend-icon.

Мы можем сделать то же самое с опорой append-icon, чтобы добавить значок справа.

Кроме того, мы можем прослушивать щелчки по значкам с помощью директив @click:append и @click:prepend.

Например, мы можем написать:

<template>
  <v-container>
    <v-row>
      <v-col col="12">
        <v-slider
          v-model="zoom"
          prepend-icon="mdi-minus"
          append-icon="mdi-plus"
          @click:append="zoomIn"
          @click:prepend="zoomOut"
        ></v-slider>
      </v-col>
    </v-row>
  </v-container>
</template>
<script>
export default {
  name: "HelloWorld",
  data: () => ({
    zoom: 100,
  }),
  methods: {
    zoomOut() {
      this.zoom = this.zoom - 10 || 0;
    },
    zoomIn() {
      this.zoom = this.zoom + 10 || 100;
    },
  },
};
</script>

Мы устанавливаем методы zoomIn и zoomOut в качестве значений директив для изменения значения this.zoom и значения ползунка.

Вертикальные слайдеры

Опора vertical заставляет слайдер отображаться вертикально.

Например, мы можем написать:

<template>
  <v-container>
    <v-row>
      <v-col col="12">
        <v-slider v-model="value" vertical label="Regular"></v-slider>
      </v-col>
    </v-row>
  </v-container>
</template>
<script>
export default {
  name: "HelloWorld",
  data: () => ({
    value: 100,
  }),
};
</script>

Большой палец

Мы можем отобразить метку для точки ползунка.

Например, мы можем написать:

<template>
  <v-container>
    <v-row>
      <v-col col="12">
        <v-slider v-model="value" thumb-label="always"></v-slider>
      </v-col>
    </v-row>
  </v-container>
</template>
<script>
export default {
  name: "HelloWorld",
  data: () => ({
    value: 100,
  }),
};
</script>

Опора thumb-label отображает ползунок.

Мы можем добавить собственный ярлык, заполнив слот thumb-label:

<template>
  <v-container>
    <v-row>
      <v-col col="12">
        <v-slider v-model="value" thumb-label="always">
          <template v-slot:thumb-label="{ value }">{{ value }}</template>
        </v-slider>
      </v-col>
    </v-row>
  </v-container>
</template>
<script>
export default {
  name: "HelloWorld",
  data: () => ({
    value: 100,
  }),
};
</script>

Заключение

Мы можем добавить ползунки, чтобы пользователи могли устанавливать желаемое значение.