Customizing the range slider

Hello Folks,

I was wondering: If I want to use a different icon for the range slider, what is the general area in the ionic source code where I should be looking to get started?


  • Pulkit

Ionic doesn’t do much styling on the range input. It seems to inherit most everything from the browser.

Here is a sample of using plain CSS to modify it:

Based on a sample I got from :


Thanks @Calendee, this helps me get started :smile:
Also curious if anyone in the community has already bent the <output> tag to their will to show notches for steps in sliders as discussed here: … in context of angularjs and ionic.

@Calendee - I apologize for my CSS ignorance in advance but how can I get something like ion-coffee super-positioned onto the background-image in that plunk’s CSS?

@learnwell Did you git any solution to have bubble over steps ?
Or any other way we can have notches for steps.

No updates from my side @gaurav