Вывести данные слайдера
 

Друзья, срочно требуется помощь. Вот несколько дней бьюсь над одной проблемой. Есть три слайдера, пробывал два варианта отсюда http://egorkhmelev.github.io/jslider/
и от сюда http://ionden.com/a/plugins/ion.rangeSlider/ . Вообщем сами они вроде работают.

Пример:
<div class="layout-slider">
<input id="CPUslider" type="slider" name="price" value="1" />
</div>

<script type="text/javascript">

      jQuery("#CPUslider").slider({ from: 1, to: 20, step: 1, round: 1, scale: [1, '|', 5, '|' , '10', '|', 15, '|', 20], skin: "round_plastic"});
   
</script>

<div>Общая цена</div>
<div id="totalprice"></div>

<script type="text/javascript">

  var vdscpuprice = $("#CPUslider").slider("value");
  document.getElementById('totalprice').innerHTML = vdscpuprice;

</script>

Необходимо получить текущее значение от слайдера, и передать в общую цену, кодом что вверху он берет значение при подгрузке страницы. Вданном случае 1. и если значение слайдера меняется, не подгружает его. если сделать таким образом:
в сам слайдер прописать:

onstatechange: function( value ){
    	var vdscpuprice = $("#CPUslider").val();
  	document.getElementById('totalprice').innerHTML = vdscpuprice;
  }

то выводит как нужно, НО! мне нужны суммировать значение трех слайдеров. Каким образом можно получить эти данные. Так же пробывал получить данные с input не получалось.
Заранее спасибо.

P.S.Сама задача, сделать три ползунка с определенными range , у каждого по значению высчитать сумму, в конце суммировать суммы трех слайдеров. Если есть решения купил бы.

SNEG, не судьба сделать три переменные и их суммировать :-?
var sum = [0,0,0]
onstatechange: function( value ){
sum[0]=+value
document.getElementById('totalprice').innerHTML = sum[0]+sum[1]+sum[2]
}

Возможно и судьба,извиняюсь попробую внятней обьяснить:

<div class="layout-slider">
  <input id="CPUslider" type="slider" name="price" value="1" /></br>
  <input id="RAMslider" type="slider" name="price" value="1" /></br>
  <input id="HDDslider" type="slider" name="price" value="1" />
</div>
    <script type="text/javascript">
      jQuery("#CPUslider").slider({ from: 1, to: 20, step: 1, round: 1, scale: [1, '|', 5, '|' , '10', '|', 15, '|', 20], skin: "round_plastic"});
      jQuery("#RAMslider").slider({ from: 1, to: 16, step: 1, round: 1, scale: [1, '|', 4, '|' , '8', '|', 12, '|', 16], skin: "round_plastic"});
	  jQuery("#HDDslider").slider({ from: 1, to: 100, step: 1, round: 1, scale: [1, '|', 10, '|' , 20, '|', 30, '|', 40, '|', '50', '|', 60, '|', 70, '|', 80, '|', 90, '|', 100], skin: "round_plastic"});
    </script>
<div>Общая цена</div>
<div id="totalprice"></div>
<script type="text/javascript">
     var vdscpuprice = $("#CPUslider").slider("value");
     var vdsramprice = $("#RAMslider").slider("value");
     var vdshddprice = $("#HDDslider").slider("value");
     document.getElementById('totalprice').innerHTML = (vdscpuprice + vdsramprice + vdshddprice);
</script>

Эта структура работает почти-что как надо за исключением того что значения vdscpuprice + vdsramprice + vdshddprice - изначальные, на которых подгружается страница и при изменении ползунка значения не меняются, меняются только у самого ползунка. Есть ли возможность как то их брать из текущих значений ползунка? тоесть если ползунок подвинули один из трех, автоматически значение поменялось и в 'totalprice".
Я так понимаю прописывать document.getElementById('totalprice').innerHTML = sum[0]+sum[1]+sum[2] нужно вне onstatechange? а var sum = [0,0,0] перед слайдерами?

да

Сделал, получилось:

<div class="layout-slider">
  <input id="CPUslider" type="slider" name="price" value="1" /></br>
  <input id="RAMslider" type="slider" name="price" value="1" /></br>
  <input id="HDDslider" type="slider" name="price" value="1" />
</div>
    <script type="text/javascript">
      var vdscpu = 0;
      var vdsram = 0;
      var vdshdd = 0;
      jQuery("#CPUslider").slider({ from: 1, to: 20, step: 1, round: 1, scale: [1, '|', 5, '|' , '10', '|', 15, '|', 20], skin: "round_plastic",
        onstatechange: function( value ){
        vdscpu = value}
      });
      jQuery("#RAMslider").slider({ from: 1, to: 16, step: 1, round: 1, scale: [1, '|', 4, '|' , '8', '|', 12, '|', 16], skin: "round_plastic",
        onstatechange: function( value ){
        vdsram = value}
      });
	    jQuery("#HDDslider").slider({ from: 1, to: 100, step: 1, round: 1, scale: [1, '|', 10, '|' , 20, '|', 30, '|', 40, '|', '50', '|', 60, '|', 70, '|', 80, '|', 90, '|', 100], skin: "round_plastic",
        onstatechange: function( value ){
        vdshdd = value}
      });
    </script>
<div>Общая цена</div>
<div id="totalprice"></div>
<script type="text/javascript">
     var vdscpuprice = vdscpu;
     var vdsramprice = vdsram;
     var vdshddprice = vdshdd;
     document.getElementById('totalprice').innerHTML = (vdscpu + vdsram + vdshdd );
</script>

Но опять выводит только первые данные, при изменении данных на ползунке никаких изменений(

SNEG,
ну ёклмн строка 29 должна быть ещё в 13, 17, 21 -- иначе как вывод то данных сработает.

Рони спасибо огромное за внимание, но если вставляю эту строчку к примеру

<script type="text/javascript">
      var vdscpu = 0;
      var vdsram = 0;
      var vdshdd = 0;

      jQuery("#CPUslider").slider({ from: 1, to: 20, step: 1, round: 1, scale: [1, '|', 5, '|' , '10', '|', 15, '|', 20], skin: "round_plastic",
        onstatechange: function( value ){
        vdscpu=value;
        document.getElementById('totalprice').innerHTML = vdscpu;
      }
      });
      jQuery("#RAMslider").slider({ from: 1, to: 16, step: 1, round: 1, scale: [1, '|', 4, '|' , '8', '|', 12, '|', 16], skin: "round_plastic",
        onstatechange: function( value ){
        vdsram=value;
        document.getElementById('totalprice').innerHTML = vdsram;
      }
      });
	    jQuery("#HDDslider").slider({ from: 1, to: 100, step: 1, round: 1, scale: [1, '|', 10, '|' , 20, '|', 30, '|', 40, '|', '50', '|', 60, '|', 70, '|', 80, '|', 90, '|', 100], skin: "round_plastic",
        onstatechange: function( value ){
        vdshdd=value
        document.getElementById('totalprice').innerHTML = vdshdd;
      }
      });
    </script>

вместо


Вроде думаешь чего такого передать в переменную. Весь интернет перерыл с запросами get value from input, get value from range и т.д. и т.п.((( и не получается.

SNEG,
НЕНАДО обращаться к тому чего нет -- либо ставите скрипт после <div id="totalprice"></div>
либо в любое место но после готовности страницы

$(window).load(function ()
{
      var vdscpu = 0;
      var vdsram = 0;
      var vdshdd = 0;
      document.getElementById('totalprice').innerHTML = (vdscpu + vdsram + vdshdd );
      $("#CPUslider").slider({ from: 1, to: 20, step: 1, round: 1, scale: [1, '|', 5, '|' , 10, '|', 15, '|', 20], skin: "round_plastic",
        onstatechange: function( value ){
        vdscpu = +value;
        document.getElementById('totalprice').innerHTML = (vdscpu + vdsram + vdshdd );
        }
      });
      $("#RAMslider").slider({ from: 1, to: 16, step: 1, round: 1, scale: [1, '|', 4, '|' , 8, '|', 12, '|', 16], skin: "round_plastic",
        onstatechange: function( value ){
          vdsram = +value
          document.getElementById('totalprice').innerHTML = (vdscpu + vdsram + vdshdd );
        }
      });
	    $("#HDDslider").slider({ from: 1, to: 100, step: 1, round: 1, scale: [1, '|', 10, '|' , 20, '|', 30, '|', 40, '|', 50, '|', 60, '|', 70, '|', 80, '|', 90, '|', 100], skin: "round_plastic",
        onstatechange: function( value ){
          vdshdd = +value
          document.getElementById('totalprice').innerHTML = (vdscpu + vdsram + vdshdd );
        }
      });
      })

Огромнейшее спасибо!!!!)))):dance:

SNEG, на всякий
да у вас там с 1 отсчёт

var vdscpu = 0;
      var vdsram = 0;
      var vdshdd = 0;

:)