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

[sachingarg05]

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]

Thanks for the issue. Can you provide a code sample of the issue you are running into to help me better understand your use case?

[sachingarg05]

Consider this ion-range with min and max of -100 and 100

<ion-range color="dark" [min]="-100" [max]="100" [value]="0" [snaps]="10" [step]="10" mode="md" pin="true">

Side note: Maybe the 'tick' mark at 'floor value' location can also be slightly 'heavier' than other tick marks.

[liamdebeasi]

Thanks! That makes sense. Do you happen to have examples of other applications/libraries that offer this behavior?

[sachingarg05]

ngx-slider has this option, by setting property 'showSelectionBarFromValue'

On their demo page, check the demo for "Slider with visible selection bar from specified value":

https://angular-slider.github.io/ngx-slider/demos#selection-bar-from-value-slider

[liamdebeasi]

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

[sachingarg05]

Have created a pull request that implements this: #24399

[liamdebeasi]

Thanks for the issue. This has been resolved via #25598 and the feature will be available in an upcoming release of Ionic.

[sachingarg05]

Thanks 👍

[ionitron-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.