Mobile Development with Ionic and Vue — Loading Spinner and Range Input
Tags: webdev, android, vue, javascript
Published: 2021-01-23 02:18:41

**Check out my books on Amazon at https://www.amazon.com/John-Au-Yeung/e/B08FT5NT62**

**Subscribe to my email list now at http://jauyeung.net/subscribe/**


If we know how to create Vue web apps but want to develop mobile apps, we can use the Ionic framework.

In this article, we’ll look at how to get started with mobile development with the Ionic framework with Vue.

### Loading Spinner

We can add a loading spinner with the `ion-spinner` component.

For example, we can write:

```
<template>
  <ion-spinner name="bubbles"></ion-spinner>
</template>

<script>
import { IonSpinner } from "@ionic/vue";
import { defineComponent } from "vue";

export default defineComponent({
  components: { IonSpinner },
});
</script>
```

to add a loading spinner.

### Radio

We can add radio buttons with the `ion-radio` component.

For example, we can write:

```
<template>
  <ion-list>
    <ion-radio-group value="biff">
      <ion-list-header>
        <ion-label>Name</ion-label>
      </ion-list-header>
      <ion-item>
        <ion-label>Biff</ion-label>
        <ion-radio slot="start" value="biff"></ion-radio>
      </ion-item>
      <ion-item>
        <ion-label>Cliff</ion-label>
        <ion-radio slot="start" value="cliff"></ion-radio>
      </ion-item>
    </ion-radio-group>
  </ion-list>
</template>

<script>
import {
  IonItem,
  IonLabel,
  IonList,
  IonListHeader,
  IonRadio,
  IonRadioGroup,
} from "@ionic/vue";
import { defineComponent } from "vue";

export default defineComponent({
  components: {
    IonItem,
    IonLabel,
    IonList,
    IonListHeader,
    IonRadio,
    IonRadioGroup,
  },
});
</script>
CopyCopied
Properties
```

to add an `ion-list` component and `ion-item` component to hold a series of radio buttons.

The `slot` prop set to `start` put the radio button on the left side.

Also, we can put radio buttons in `ion-radio-group` component:

```
<template>
  <ion-list>
    <ion-radio-group>
      <ion-list-header>
        <ion-label> Auto Manufacturers </ion-label>
      </ion-list-header>
      <ion-item>
        <ion-label>Cord</ion-label>
        <ion-radio value="cord"></ion-radio>
      </ion-item>
      <ion-item>
        <ion-label>Duesenberg</ion-label>
        <ion-radio value="duesenberg"></ion-radio>
      </ion-item>
    </ion-radio-group>
  </ion-list>
</template>

<script>
import {
  IonItem,
  IonLabel,
  IonList,
  IonListHeader,
  IonRadio,
  IonRadioGroup,
} from "@ionic/vue";
import { defineComponent } from "vue";

export default defineComponent({
  components: {
    IonItem,
    IonLabel,
    IonList,
    IonListHeader,
    IonRadio,
    IonRadioGroup,
  },
});
</script>
```

We add the `ion-radio-group` component to group the radio buttons together.

### Range Input

We can add a numeric input with the `ion-range` component.

For example, we can write:

```
<template>
  <ion-list>
    <ion-item>
      <ion-range
        :min="1000"
        :max="2000"
        :step="100"
        :snaps="true"
        color="secondary"
      ></ion-range>
    </ion-item>
    <ion-item>
      <ion-range
        ref="rangeDualKnobs"
        dual-knobs="true"
        :min="21"
        :max="72"
        :step="3"
        :snaps="true"
      ></ion-range>
    </ion-item>
  </ion-list>
</template>

<script>
import { IonItem, IonLabel, IonList, IonRange } from "@ionic/vue";
import { defineComponent } from "vue";

export default defineComponent({
  components: { IonItem, IonLabel, IonList, IonRange },
  mounted() {
    this.$refs.rangeDualKnobs.value = { lower: 24, upper: 42 };
  },
});
</script>
```

We add the `ion-range` component with a few props.

`min` sets the min allowed value.

`max` sets the max allowed value.

`step` sets step interval.

`snaps` set to `true` makes the knob snaps to a step.

We can also assign a `ref` so that we can set the `value` property with it to set the value.

### Conclusion

We can add a loading spinner and a range input with Ionic Vue.