Могу ли я создать слайдер рейтинга, где ручка или ручка анимирует / трансформирует при перетаскивании?

Question

Нужно посмотреть, возможно ли что-то технически, прежде чем начинать его разработку. Идеальным сценарием был бы слайдер рейтинга, не отличающийся от этого: http://flowplayer.org/tools/rangeinput/,, но когда я перетаскивал ползунок через форму анимации ручки.

Я загрузил изображение, чтобы показать, что я имею в виду:

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

Я хочу создать рейтинговую систему, которая имеет четыре метрики, две из которых изменяются, а две расширяются (птица, яйцо и воздушный шар, которые вы видите здесь, являются лишь примерами заполнителей). В идеале это должно быть как можно более нейтральным к платформе.

Ползунок записывает значение в этом диапазоне, которое мы можем затем обработать.

Возможно ли это? Если так, идеи, как высоко ценится. Спасибо, ребята.

Answer 1

Да, конечно, это возможно. Например, используя плагин у вас есть сообщение (jqueryRangeinput), вы можете отслеживать это событие:

$(":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!
});

Надеюсь, это может быть полезно!