[SOLVED] Make ion-range align with an other element

Ionic Framework ionic-v3
1

Hello,

I am doing a form with a range. I want to put an input near the range, to change/precise the value we selected.
I can’t find a way to put the input on the same line as the range (near it).
I tried to put 2 inputs on the same line and it works, but I can’t do the same with two ranges.

The elements are in column as ou can see, but I want them inline :
Column - not line

My code is :

<ion-item class="slider">
        <ion-input type="text"></ion-input>
        <ion-range  min="0" max="10000"></ion-range>
</ion-item>

.slider {
      display: flex!important;
      width: 100%!important;
      position: relative!important;

      ion-input {
        display: inline-block!important;
        width: 40%!important;
        background-color: green;
      }

      ion-range {
        display: inline-block!important;
        width: 40%!important;
        background-color: red;
      }
}

Thank you in advance !
Xavier

2

You should check out the CSS Utilities, there are attributes to help you just for this. For example this should work for you:


<ion-list>
  <ion-item>      
    <ion-input type="text" item-start></ion-input>
    <ion-range min="0" max="10000"></ion-range>
  </ion-item>
</ion-list>
1 Like
3

It works, thank you so much ! I did’nt knew the CSS Utilities, it’s perfect !

1 Like
4

You are welcome! Yup the utilities are very useful.