ion.rangeSlider icon indicating copy to clipboard operation
ion.rangeSlider copied to clipboard

Can we implement skin color with configuration.

Open patelnwd opened this issue 5 years ago • 4 comments
trafficstars

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?

patelnwd avatar May 22 '20 10:05 patelnwd

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.

IonDen avatar May 22 '20 11:05 IonDen

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.

patelnwd avatar May 29 '20 17:05 patelnwd

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

rohanb10 avatar Jun 09 '20 06:06 rohanb10