Customizing the range slider


#1

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

#2

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


#3

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.


#4

@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?


#5

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


#6

No updates from my side @gaurav