How to pass custom range values array to ion-range?


I want to use ion-range component with values like “10,100,1000,10000,…” and “JAN,FEB,MAR,…”

Is there any way to pass range values in the array to ion-range?

@mhartington, Can we do this in Ionic?
Need some help on this.

In the first example you give, I think you can set min="1" and max=[whatever the top range is] with step="1", then use the Math.pow(10, x), where x is your range value to render in your template. For months I would use min="0" max="11" and use Date.getMonth(x).

In other straightforward cases you can create an array of values and map them to the units.

let petsArray = ["dog","cat","parakeet","pony"];
let timeRange = ["8:00am","8:30am", ... "6:30pm"];

Hopefully that will work for you.

But it’s easy to imagine use cases where it’s impractical to map values to a simple array. (Even the timeRange array isn’t a great solution. What if your boss or client decides one day they want variable time increments?) If you need something that scales, I recommend building a service or pipe to handle the unit conversion, or just ignore the altogether and build a custom component/directive.