Ionic - age number spinner component

@DJ.eLLy wrote:

Hi ppl, i'm working on hybrid mobile app and got on a little problem.
Since i'm new to Ionic framework a been using it for a month only, i'm still learning and connecting all the dots related to components and the whole framework.

I'm currently adding new items to mu left side menu, and one of the new component is age number (min:18 , max:65) spinner. Search through the web and Ionic docs, but didn't find any components similar to it.

1.png385x727 51.7 KB

For now i only have labels as number input fields, only as a placeholder.

<div class="match-age">
        <label class="item item-input min-age">
          <input type="number" min="18" max="65">
        </label>
        <label class="item item-input max-age">
          <input type="number" min="18" max="65">
        </label>
      </div>

And it looks like this:

2.png366x645 30.2 KB

My template for this submenu looks like this:

<ion-list ng-if="(menuMatch && !menuMain)" class="slide-right-left">
      <div class="item item-divider main-menu-divider">
        {{ "distance" | translate }}
      </div>
      <div class="item range">
        <input type="range" name="distance" min="0" max="200" value="{{rangeValue}}" ng-model="rangeValue"
               step="10">
        {{ rangeValue }}
      </div>
      <div class="item item-divider main-menu-divider">
        {{ "age" | translate }}
      </div>
      <div class="match-age">
        <label class="item item-input min-age">
          <input type="number" min="18" max="65">
        </label>
        <label class="item item-input max-age">
          <input type="number" min="18" max="65">
        </label>
      </div>
      <div class="item item-divider main-menu-divider">
        {{ "match_with" | translate }}
      </div>
      <div class="match-options">
        <ion-radio class="man-option" ng-model="choice" ng-value="'men'">Men</ion-radio>
        <ion-radio class="woman-option" ng-model="choice" ng-value="'women'">Women</ion-radio>
      </div>

      <div href="" ng-click="saveMatchOptions()">
        <button class="button save-options">
          {{ "save_options_btn" | translate }}
        </button>
      </div>
    </ion-list>

If there is not something similar to that in the framework, i could try to make custom html component and add some functionality with Javascript, and styles it with CSS, in order to create something similar.

Posts: 1

Participants: 1

Read full topic