Add ticks attribute to range

[sethlilly]

Feature Request

Ionic version:

• 4.x

Describe the Feature Request

When using ion-range with snaps set to true, ticks are displayed; however, when using the snaps attribute the display of ticks may not always be desired.

Describe Preferred Solution

Add a ticks attribute (default: true) to ion-range to show/hide ticks when snaps is set to true.

Describe Alternatives

Because this is styled in shadow DOM, there really isn't a good way to override the display of these elements from outside the component aside from setting a CSS variable but that only results in hiding the ticks. The solution above prevents the ticks from being rendered in the first place, resulting in a cleaner DOM.

Related Code

...

Additional Context

PR forthcoming.

[d0x]

Nice Idea with the Ticks Attribute! The scss variables to disable the ticks which @sethlilly mentioned are:

        --bar-background: transparent;
        --bar-background-active: transparent;
        --ion-color-step-250: transparent;

(at least for ionic 4.0.2. Before that it was --ion-background-color-step-250: transparent instead of --ion-color-step-250)

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