Response title
This is preview!
Add and multiply values from jQuery UI Sliders?
in Using jQuery UI
•
8 years ago
Hello all,
I'm trying to write a script where the user has 2 sliders; when they change them, I need javascript to add the 2 numbers together and then multiply them by a third number and display them.
I have the 2 sliders displaying their corresponding numbers correctly, but I can't figure out the "add the 2 together, multiply and display them" part. Can someone please help?
- <html xmlns="http://www.w3.org/1999/xhtml">
- <head>
- <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
- <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
- <script src="jquery-ui-1.8.22.custom.min.js" type="text/javascript"></script>
- <link rel="stylesheet" href="css/ui-lightness/jquery-ui-1.8.22.custom.css">
- <script>
- $(function() {
- var valueMultiplier = '5';
- $( "#slider" ).slider({
- value:1,
- min: 1,
- max: 12,
- step: 1,
- slide: function( event, ui ) {
- if(ui.value > 1){
- $( "#amount" ).val( + ui.value + " months" );
- }else{
- $( "#amount" ).val( + ui.value + " month" );
- }
- }
- });
- $( "#amount" ).val($( "#slider" ).slider( "value" ) + " month" );
- $( "#slidertwo" ).slider({
- value:1,
- min: 3,
- max:36,
- step: 3,
- slide: function( event, ui ) {
- if(ui.value > 1){
- $( "#amounttwo" ).val( + ui.value + " months" );
- //$( "#amountthree" ).val( + ui.value + PREVIOUS SLIDER UI VALUE HERE + " months" );
- }else{
- $( "#amounttwo" ).val( + ui.value + " month" );
- }
- }
- });
- $( "#amounttwo" ).val($( "#slidertwo" ).slider( "value" ) + " months" );
- $( "#amountthree" ).val($( "#slidertwo" ).slider( "value" ) + " monthzzz" );
- function displayVals(){
- var valOne = $("#amount").val();
- var valTwo = $("#amounttwo").val();
- var valTotal = valOne+valTwo*valueMultiplier;
- $("p.holder").html("total: " + valTotal + "<br/>");
- }
- });
- </script>
- </head>
- <body>
- <p>
- <label for="amount">Value One?:</label>
- <input type="text" id="amount" style="border:0; color:#f6931f; font-weight:bold;" />
- <input type="text" id="amountthree" style="border:0; color:#f6931f; font-weight:bold;" />
- </p>
- <div id="slider"></div>
- <p>
- <label for="amounttwo">Value Two?:</label>
- <input type="text" id="amounttwo" style="border:0; color:#f6931f; font-weight:bold;" />
- </p>
- <div id="slidertwo"></div>
- <p class="holder">Values added together and multiplied by the variable: </p>
- </body>
- </html>
1