ionic-framework
ionic-framework copied to clipboard
feat: range, support non-linear scales
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
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
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 🤔
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