feat: range, add reference point to start range slider at

Prerequisites

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

Describe the Feature Request

ion-range shows an active bar which starts from extreme left (0 value) to current knob location.

Very often ion-range needs to have its floor value (or base value) in the center or somewhere else. In these cases, it is required for the active bar to show between the floor value and current knob value, instead of always starting from 0 (extreme left).

Describe the Use Case

A slider to reduce or increase brightness of an image.

Describe Preferred Solution

Adding a ‘floor’ value attribute for ion-range, and then updating the left/right calculation of active bar to start from ‘floor’ value to current knob value (instead of always starting from 0 to current knob value)

Describe Alternatives

No response

Related Code

/main/core/src/components/range/range.tsx, line 424

    const barStart = `${ratioLower * 100}%`;
    const barEnd = `${100 - ratioUpper * 100}%`;

These calculations will need to be updated to start from a floor value (or base value) to current knob value, instead of always starting from 0 (ratioLower is always zero for single knob ion-range).

Additional Information

No response

[liamdebeasi]

Thank you! I discussed with the team and we think this would be a good feature to add to Ionic.

[ionitron-bot[bot]]

Thanks for the issue! This issue is being locked to prevent comments that are not relevant to the original issue. If this is still an issue with the latest version of Ionic, please create a new issue and ensure the template is fully filled out.