Change style

[MikeGsus]

I want to change te color in the bar of the <ion-range-slider>. Does somebody know how can I do it? Thanks!

[tatsujb]

yeah would be nice to be able to do this just like in the original. the original has 5 skins to choose from : http://ionden.com/a/plugins/ion.rangeSlider/demo_advanced.html

[tatsujb]

hello?

[PhilippStein]

@tatsujb, @MikeGsus This angular module is just a wrapper around the original module, meaning you can style it the same way as the "original" ion-range-slider. You can also choose from the 5 skins. Please have a look at the README file in this project

Also add the ion-range-slider style and skin css to the styles section in your .angular-cli.json

Just declare instead of the "skinFlat" skin another css file.

@MikeGsus to change the color of the bar, just overwrite the background property of the class ".irs-bar" in your css file.

[tatsujb]

hey @PhilippStein I imagine without the .angular-cli.json changes, the slider wouldn't have shown up at all?

I have a correctly working range slider but I cannot style it. the ".irs-..." css selectors that I can clearly see in the chrome dev tools are not overwritable, even with !important. the css from the slider is simply way higher priority.

also that doesn't tell us how the "original" styles itself. a dedicated section in your readme would be appropriate.

as it stands me and @MikeGsus are left stranded.

[MikeGsus]

I modified the files here node_modules\ion-rangeslider\css. That works to me. :smile:

[tatsujb]

well that will fail if you git pull your project from elsewhere or if you ever run "npm install" or "npm update" or "yarn" again which why wouldn't you?

this is not a fix it's a band-aid.

[PhilippStein]

@MikeGsus this is no good practice. You should overwrite the styles in your own css file. Copy the part from the ion-rangeslider css to your custom file and modify it there.

@tatsujb make sure you have the correct order of style files in your .angular-cli.json file. Your own file with the overwrites must be listet in the styles section AFTER the ion-rangeslider file.

[PhilippStein]

@tatsujb also styling is not part of this angular module. As said this module is just a wrapper around the original ion-rangeslider. So the original slider is included in your project and you can style it as if you would do without using this angular wrapper. This is why I will not add a dedicated section in the README for this.

[tatsujb]

I've figured it out

what you have to do to change the skin : go into angular-cli.json and change the line with : "../node_modules/ion-rangeslider/css/ion.rangeSlider.skinFlat.css"

here are the five possible values : "../node_modules/ion-rangeslider/css/ion.rangeSlider.skinFlat.css" "../node_modules/ion-rangeslider/css/ion.rangeSlider.skinHTML5.css" "../node_modules/ion-rangeslider/css/ion.rangeSlider.skinModern.css" "../node_modules/ion-rangeslider/css/ion.rangeSlider.skinNice.css" "../node_modules/ion-rangeslider/css/ion.rangeSlider.skinSimple.css"

but you can also copy one of those into your project, edit it (like @MikeGsus did) and import that instead.

this is what I recommend.

this will guarantee that the style will be part of your project and not overwritten with every "npm i" also it'll mean your style changes on that file are now followed by your compiler and reflected in real time.

[MikeGsus]

@PhilippStein I've tried to overwrite, but It didn't work; so when I add the package I modified the values on those files and It ran. However, I'll try to overwrite again and I'll notice you how it go.

[narendrasamcom]

@PhilippStein I want to change the design of slider I had try hard but i can't change can you please help me on this? right now I am getting this https://i.imgur.com/ZDxTdlP.png

but i need this https://i.imgur.com/Nte1DYG.png

Thanks