search

IonDen / ion.rangeSlider

jQuery only range slider
http://ionden.com/a/plugins/ion.rangeSlider/en.html
MIT License
2.56k stars 508 forks source link

Can we implement skin color with configuration. #706

Open patelnwd opened 4 years ago

patelnwd commented 4 years ago

It's a very useful library. Now I am missing one feature in this. can we introduce skin color options with color hex code?

http://ionden.com/a/plugins/ion.rangeSlider/skins.html

for example: $(".js-range-slider").ionRangeSlider({ skin: "modern", skinColor: '#F6F6F6' });

actually it requires in my application to show multiple range slider and each slider need to assign a specific color.

  1. suppose a range component with 10-20 out of 0-100 needs to show in red with Modern skin.
  2. suppose a range component with 21-30 out of 0-100 needs to show in blue with Modern skin. and this scenario goest to a dynamic loop. suppose it goes to 10 components. now how can we show every component with specific skin color?
IonDen commented 4 years ago

Hi, it is not possible to change skin color like this. But, you can easily clone desired skin -> make its version in different colors -> and just choose different skin each time skin: "modern_red", skin: "modern_blue" and so on.

patelnwd commented 4 years ago

my use-case is to show the same pattern range slider with different colors having different range values. Please suggest me if any idea you have.

rohanb10 commented 4 years ago

Hello, perhaps you can use css custom variables to support this feature? You can scope it to the slider element in the DOM.

Note that this will not work on any version of IE if compatibility is a concern. Fallback values will not help if the browser doesn't support custom properties.

Could simply ignore the skin_color value if the browser is IE and use the already existing skin colour values as default, but I don't see a clean and concise way to do this in the current JS file. Wouldn't be that hard to write code to do this, but I'm not sure if the developer would like to go down the path of browser specific features.

I don't think this will be very helpful for your use case @patelnwd, but it would probably be the easiest way if @IonDen chooses to implement a skin_color option.

I'm working on a project that would be enhanced with different colour options for the Round skin theme. If I manage to implement a good global variable solution, I will definitely let you know. I don't care much for IE support as this is just a free side project

maksumic commented 6 months ago

Bump