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?

Thanks!

  • 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: http://plnkr.co/edit/ULmvU0nJeQpChyEU02a3?p=preview

Based on a sample I got from : http://www.webstutorial.com/range-input-slider-html5-css3/html-5

2 Likes

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: http://css-tricks.com/value-bubbles-for-range-inputs/ … 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