!!! В песочнице сохранить не могу - выдает error - 500 (Service unavailable (with message)). Поэтому пример в аттаче - sliderDiagram.zip.
Диаграма появится, если сдвинуть все ползунки поочереди (от первого к последнему), когда последний изменит свое значение - появится диаграмма.
Использую
http://www.highcharts.com/demo/pie-legend за основу для диаграммы.
В примере - данные для диаграммы - статичны, в моем случае, значения нужно подтянуть из ползунков.
Не использую clip/jquery ui и т.д. для ползунка, т.к. функционал будет работать на IE11 на touch девайсе, из рабочих вариантов остался только input type="range". Он корректно работает на девайсе (и с мышью и с "пальцем"). (Note: Lenovo ThinkPad Helix i7 + IE 11
).
Для слайдеров, использую такую конструкцию:
<input type="range" id="slider" min="1" max="5" onchange="this.id=this.value" value="1">
Скрипт:
$('#slider2').change(function () {
var b = this.value;
z2 = b * p;
console.log('z2=', z2);
Чтобы работало
- функция change для кадлого последующего слайдера, вставлена в предыдущую. ну и соответственно, диаграмма обновляется, когда сдвигаем последний слайдер.
Нужно, чтобы диаграмма обновлялась при изменении значения каждого отдельно взятого слайдера.
Дайте, пожалуйста, пинка в правильном направлении.