jQuery Sliders SUM

Status
Niet open voor verdere reacties.

Vinnoko

Nieuwe gebruiker
Lid geworden
7 aug 2013
Berichten
1
Beste mede webdesigners,

Ik heb een issue met jquery. Ik heb een reeks sliders gemaakt waarbij de waardes van de slide die je op dat moment aanpast onder de sliders wordt weergeven nu is het de bedoeling dat die niet de waardes van alle slides bij elkaar opgeteld. Nu loop ik daar in het denken aan een oplossing in vast. Wie kan me hierbij verder helpen.

HTML:
<html>
<head>
  <meta charset="utf-8" />
  <title>jQuery UI Slider - Snap to increments</title>
  <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
  <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
  <script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
  <link rel="stylesheet" href="/resources/demos/style.css" />
<style>
  #Strength, #Vitality, #Magic, #Spirit, #Speed, #Accuracy, #Evasion {
    width: 300px;
  }
  #Strength, #Vitality, #Magic, #Spirit, #Speed, #Accuracy, #Evasion, .ui-slider-range { background: #010039; }
  #Strength, #Vitality, #Magic, #Spirit, #Speed, #Accuracy, #Evasion, .ui-slider-handle { border-color: #010039; }
  </style>
 <script>
  $(function() {
    $( "#Strength, #Vitality, #Magic, #Spirit, #Speed, #Accuracy, #Evasion" ).slider({
      value:100,
      min: 0,
      max: 3500,
      step: 50,
      slide: function( event, ui ) {
        $( "#amount" ).val( ui.value );
      }
    });
    $( "#amount" ).val( $( "#slider" ).slider( "value" ) );
  });
  </script>
</head>
<body>
 
<dl>
<dt>Strength</dt>
<dd><div id="Strength"></div></dd>
</dl>
<dl>
<dt>Vitality</dt>
<dd><div id="Vitality"></div></dd>
</dl>
<dl>
<dt>Magic</dt>
<dd><div id="Magic"></div></dd>
</dl>
<dl>
<dt>Spirit</dt>
<dd><div id="Spirit"></div></dd>
</dl>
<dl>
<dt>Speed</dt>
<dd><div id="Speed"></div></dd>
</dl>
<dl>
<dt>Accuracy</dt>
<dd><div id="Accuracy"></div></dd>
</dl>
<dl>
<dt>Evasion</dt>
<dd><div id="Evasion"></div></dd>
</dl>
<dl>
<dt><br />Total Amount Used</dt>
<dd><p>
  <input type="text" id="amount" style="border: 0; color: #f6931f; font-weight: bold;" />
</p></dd>
</dl>
 
 
</body>
</html>

Alvast bijvoorbaat dank,

Met vriendelijke groet,

Vinnoko
 
Laatst bewerkt:
Status
Niet open voor verdere reacties.
Steun Ons

Nieuwste berichten

Terug
Bovenaan Onderaan