feat: range, support non-linear scales

[madmacc]

Prerequisites

• [X] I have read the Contributing Guidelines.
• [X] I agree to follow the Code of Conduct.
• [X] I have searched for existing issues that already include this feature request, without success.

Describe the Feature Request

Ability make the ionic range slider logarithmic/exponential https://ionicframework.com/docs/api/range

e.g. similar to this Jquery slider https://codepen.io/flostrasser/pen/NWxJXMY

Describe the Use Case

My use case is for a donation slider where 95% of the donations will be <$100 but I want the slider to go to up to $1000.

I am increasing the step size as the donation increases but the x axis is still has 1000 points. I want say 1-10 step 1, then 10 - 100 step 10, then 100 - 500 step 50, then 500 -1000 step 100 (very rough example).

Describe Preferred Solution

Similar to this Jquery slider https://codepen.io/flostrasser/pen/NWxJXMY

Describe Alternatives

Jquery slider https://codepen.io/flostrasser/pen/NWxJXMY

Related Code

No response

Additional Information

No response

[liamdebeasi]

Thanks for the issue. I think this would be a good feature to support. Material UI/MUI also has support for any non-linear scale through the use of a scale property: https://mui.com/material-ui/react-slider/#non-linear-scale

[EinfachHans]

i would also like it if we could pass possible values as an array, while the range should then slide through the values of the array 🤔

[jjgriff93]

I'd love to see this support also! Something like:

<ion-range [value]="amount" min="100" max="10000" [step]="{ 250: 10, 1000: 100, 5000: 250 }"></ion-range>

Where the key is the value threshold and the value is the step increment