Vuetify — Switches and Sliders

Vuetify is a popular UI framework for Vue apps.

In this article, we’ll look at how to work with the Vuetify framework.

Disabled Switches

We can disable switches with the disabled prop:

<template>
  <v-container>
    <v-row>
      <v-col col="12">
        <v-switch value input-value="true" disabled></v-switch>
      </v-col>
    </v-row>
  </v-container>
</template>
<script>
export default {
  name: "HelloWorld",
  data: () => ({}),
};
</script>

This way, it’s not active.

Loading Switch

A switch can show a loading state.

For example, we can write:

<template>
  <v-container>
    <v-row>
      <v-col col="12">
        <v-switch loading="warning" value input-value="true"></v-switch>
      </v-col>
    </v-row>
  </v-container>
</template>
<script>
export default {
  name: "HelloWorld",
  data: () => ({}),
};
</script>

The loading prop with the style name shows the loading state with the given style.

Switches Colors

We can change the switch color with the color prop:

<template>
  <v-container>
    <v-row>
      <v-col col="12">
        <v-switch v-model="ex" label="red" color="red" value="red" hide-details></v-switch>
      </v-col>
    </v-row>
  </v-container>
</template>
<script>
export default {
  name: "HelloWorld",
  data: () => ({
    ex: false,
  }),
};
</script>

Flat Switches

The flat prop makes a switch flat:

<template>
  <v-container>
    <v-row>
      <v-col col="12">
        <v-switch v-model="sw" flat :label="`Switch: ${sw.toString()}`"></v-switch>
      </v-col>
    </v-row>
  </v-container>
</template>
<script>
export default {
  name: "HelloWorld",
  data: () => ({
    sw: false,
  }),
};
</script>

Inset Switches

A switch can be displayed in inset mode with the inset prop:

<template>
  <v-container>
    <v-row>
      <v-col col="12">
        <v-switch v-model="sw" inset :label="`Switch: ${sw.toString()}`"></v-switch>
      </v-col>
    </v-row>
  </v-container>
</template>
<script>
export default {
  name: "HelloWorld",
  data: () => ({
    sw: false,
  }),
};
</script>

Sliders

A slider is used to let users select a number from a range.

We add one with the v-slider component:

<template>
  <v-container>
    <v-row>
      <v-col col="12">
        <v-slider v-model="slider" class="align-center" :max="max" :min="min" hide-details>
          <template v-slot:append>
            <v-text-field
              v-model="slider"
              class="mt-0 pt-0"
              hide-details
              single-line
              type="number"
              style="width: 60px"
            ></v-text-field>
          </template>
        </v-slider>
      </v-col>
    </v-row>
  </v-container>
</template>
<script>
export default {
  name: "HelloWorld",
  data: () => ({
    slider: 0,
    max: 100,
    min: 0,
  }),
};
</script>

We populate the append slot to show some to the right of the slider.

A v-text-field is shown to display the v-model value.

The max and min props are the max and min values of the slider respectively.

Also, we can prepend an item to the slider by populating the prepend slot:

<template>
  <v-container>
    <v-row>
      <v-col col="12">
        <v-slider v-model="slider" class="align-center" :max="max" :min="min" hide-details>
          <template v-slot:prepend>
            <v-text-field
              v-model="slider"
              class="mt-0 pt-0"
              hide-details
              single-line
              type="number"
              style="width: 60px"
            ></v-text-field>
          </template>
        </v-slider>
      </v-col>
    </v-row>
  </v-container>
</template>
<script>
export default {
  name: "HelloWorld",
  data: () => ({
    slider: 0,
    max: 100,
    min: 0,
  }),
};
</script>

Now we have the number shown on the left.

Conclusion

We can add switches and number sliders with Vuetify.