Forums

I want to create a slider where the gutter to the left of the thumb is filled with a solid color. Sort of a dynamic bar graph effect. I also want to be able to change that color as the slider is moved from min to max. The problem I'm having is that I'm new to YUI and I can't figure out which mechanism I should be using to add this functionality. Can someone give me a pointer on whether I should be extending something or augmenting or mixing or what? And any other thoughts on good ideas or things to watch for?

What I've got so far is a custom rail-x.png with a solid outside color and a transparent center gutter, and I can manually put a div behind it and color it as I want. Now I want to make this div an automatic feature that is automatically sized to match the distance from the min end to the thumb, and maybe provide min/max colors and the slider can interpolate. Haven't thought too much about that bit, actually.

Thank you very much for that, Juan, that's a great start.

I need to solve one problem before I can begin to work with it though; all the YUI class names have been changed from yui-slider-(foo) to yui-myslider-(foo), which results in none of the appropriate YUI styles being applied. There must be some way to tell it to use the superclass' "name" property for the purpose of constructing css class names?

As for the colors, I'm thinking I can probably get away with a red-green hue line in HSB space and convert that to RGB. Or maybe I can stick with a static color, boss willing.

Yes, YUI widgets use a NAME property in the constructor to set class names. That's what you're setting with the first parameter of Y.Base.create().

That was my first thought as well. Try to do it! It sounds fun. If you get stuck, ask here or at #yui on IRC.