Question

Looking to see if something is technically possible before embarking on its development. The ideal scenario would be a rating slider, not dissimilar to this: http://flowplayer.org/tools/rangeinput/, but as I drag the slider across the form of the knob animates.

I’ve uploaded an image to show what I mean:

http://imageshack.us/photo/my-images/818/examplesliders.jpg

I want to create a rating system that has four metrics, two that morph and two that extend (the bird/egg and balloon that you see here are just example placeholders). Ideally it would be as platform-neutral as possible.

The slider would record a value on that range that we can then process.

Is this possible? If so ideas how much appreciated. Thanks guys.

Answer 1

Yes off course it’s possible. For example using plugin you have post (jqueryRangeinput) you can monitoring this event:

$(":range").change(function(event, value) {
    //Here you can check how value is change and fadeIn(with FadeIn function) or  
    //fadeOut(with FadeOut function) the right image you wants to show.
    //You can replace slider image editing css background .handle class!
});

Hope this could be usefull!