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

#jquery #html #animation #slider #range

#jquery #HTML #Анимация #ползунок #диапазон

Вопрос:

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

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

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

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

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

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

Ответ №1:

Да, конечно, это возможно. Например, используя плагин, у вас есть post (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!
});
  

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