roundSlider plugin - unable to get starting value

Question

I'm working on a project where i need to use this roundSlider plugin.

And I'm trying to change the color of the track(.rs-range-color) with the value of the slider when it's created.

Basically, I'd like to use it so that it goes from green, to yellow, to red according to the value and appends a class (temp-) to rs-range-color.

I have it working on change event, but I'm not able to figure out how to get the start value. I'm using this as an angular directive in my project.

Here's a quick example: http://jsbin.com/zipizofeco/edit?html,css,output

Also, I checked the console and I'm actually adding tons of classes, not only the one that I need.

Answer 1

I actually managed to solve this myself, here's how if other people is interested: http://jsbin.com/forayowibu/edit?html,output

i created a setColor() function

function setColor(value){
        var el = $('.rs-range-color');
                    var tempValue = parseInt(value);
                    el.removeClass();
                    el.addClass('rs-path');
                    el.addClass('rs-transition');
                    el.addClass('rs-range-color');
                    el.addClass('speed-' + tempValue);
      }

passing the value as a parameter, and then calling it on change event and on create event.

Answer 2

Based on your requirement i just modified the sample in a handy pick way.

Just check the below demo and update the further details:

http://jsbin.com/cimojew/edit?html,css,output