CODEWITHSUNDEEP
ionic-frameworkionic4
Tomas Vancoillie
Tomas Vancoillie

Reputation: 3878

How to customize ion-range in disabled state?

Is there a way to customize the ion-range with the disabled property active?

Using ion-range as a visual cue to show where the user is in the (order)process. The user will not have the option to change the range, so the disabled property is added. This property overwrites all the custom color css. But I can't find the disabled css to overwrite it again to the desired result.

This is the custom css of the ion-range. The secondary color is the green color seen below.

enter image description here

Can we achieve the desired result below with the ion-range where the user can't control the slider?

<ion-range value="{{ range }}" min="0" max="2" color="secondary" disabled></ion-range>

Result (with disabled property)

Result

Desired result (without disabled property)

Desired result

EDIT

Since you can't change the disabled property and it's css variables, we want to display the slider without pointer or touch control by the user.

Upvotes: 1

Views: 1735

Answers (2)

Tasneem Kh.Nsour
Tasneem Kh.Nsour

Reputation: 31

just add style="pointer-events: none;"

Upvotes: 1

Ira Watt
Ira Watt

Reputation: 2145

pointer-events:none stops you from interacting with it

<ion-range style="pointer-events: none;"value="{{ range }}" min="0" max="2" color="secondary"></ion-range>

:) my final answer

Upvotes: 6

Related Questions