need javascript for slide bar like in front page of wonga.com

savsoft
savsoft used Ask the Experts™
on
I need java script for sliding bar like in front page of http://wonga.com
also want to be able to calculate values.

Comment
Watch Question

Do more with

Expert Office
EXPERT OFFICE® is a registered trademark of EXPERTS EXCHANGE®

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.5/jquery-ui.min.js"></script>
<style type="text/css">
	#slider { margin: 10px; }
	#display { font-size: 18px; font-weight: bold; }
</style>
  <script>
  $(document).ready(function() {
    $("#slider").slider({ value: 50, min: 1, max: 100,
			slide: function(event, ui) {
				var sliderValue = ui.value;
				$("#display").html(sliderValue);
				}
		});
  });
  </script>

</head>

<body>
<div id="slider"></div>
<div id="display"></div>
</body>
</html>

Open in new window

This link describes all of the functions of the jQuery slider, I wrote out a basic example in the code above that will have a slider the scrolls from zero-100 and starts at 50 and outputs the HTML of the value in a separate div.
http://docs.jquery.com/UI/Slider
Ahmed MerghaniSoftware Engineer

Commented:
I think you do it throw jQuery UI. It will be easy and fast. See this link:
http://jqueryui.com/demos/slider/

In the bottom of the link you will find very nice documentation with examples of code.
Should you be charging more for IT Services?

Do you wonder if your IT business is truly profitable or if you should raise your prices? Learn how to calculate your overhead burden using our free interactive tool and use it to determine the right price for your IT services. Start calculating Now!

Author

Commented:
Thank you for answering.
i will try all these options.

Author

Commented:
hello mackaboogie,
i have use your coding.
its work great.
but i want to know how to use it twice on same page like in wonga.com

aslo how to add these two bars value automatically.

please reply as soon as possible.
Ahmed MerghaniSoftware Engineer

Commented:
Try this:

$( ".selector" ).slider({
   slide: function(event, ui) {
      $("#bar").val($(this).value);
 }
});

NOTE that bar is the ID of one of the input elements.

Author

Commented:
i have modify code as:

<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.5/jquery-ui.min.js"></script>
<style type="text/css">
      #slider { margin: 10px; }
      #display { font-size: 18px; font-weight: bold; }

#slider2 { margin: 10px; }
      #display2 { font-size: 18px; font-weight: bold; }

</style><?php $max='500';?>
 
<script>
  $(document).ready(function() {

    $("#slider").slider({ value: 50, min: 1, max: <?php echo $max;?>,
                  slide: function(event, ui) {
                        var sliderValue = ui.value;
                        $("#display").html(sliderValue);
                        }});
$("#slider2").slider({ value: 50, min: 1, max: <?php echo $max;?>,
                  slide: function(event, ui) {
                        var sliderValue = ui.value;
                        $("#display2").html(sliderValue);
                        }});

  });
  </script>
</head>
<body>



<div id="slider"></div>

<div id="display"></div>

<br>


<div id="slider2"></div>

<div id="display2"></div>

</body>
</html>
---------------------------------------------------------------------------------------------------------





now i am able to create two different bars on same page.

now i have another problem i want to show the value of first bar at two places

if i used code <div id="display"></div>
at two different place then ony first one code work.

 
Do it like this:
---------------------------------------------------------------
<script>
  $(document).ready(function() {

    $("#slider").slider({ value: 50, min: 1, max: <?php echo $max;?>,
                  slide: function(event, ui) {
                        var sliderValue = ui.value;
                        $("#display, #display1").html(sliderValue);
                        }});
$("#slider2").slider({ value: 50, min: 1, max: <?php echo $max;?>,
                  slide: function(event, ui) {
                        var sliderValue = ui.value;
                        $("#display2").html(sliderValue);
                        }});

  });
  </script>
</head>
<body>



<div id="slider"></div>
<div id="display"></div>
<div id="display1"></div>

<br>

<div id="slider2"></div>
<div id="display2"></div>
---------------------------------------------------------------

display and display1 both will get values of first slider.

display1 you can place anywhere.

Author

Commented:
thank you rafiahmad,

can you please help me little more.
i want to calculate instantly second bar value by multiple with 5
then shows it too
I am not sure if i understand you correctly. Did you mean you want to show the second bar value after multiplying it by 5? If yes, the do this:




<script>
  $(document).ready(function() {

    $("#slider").slider({ value: 50, min: 1, max: <?php echo $max;?>,
                  slide: function(event, ui) {
                        var sliderValue = ui.value;
                        $("#display, #display1").html(sliderValue);
                        }});
$("#slider2").slider({ value: 50, min: 1, max: <?php echo $max;?>,
                  slide: function(event, ui) {
                        var sliderValue = parseInt(ui.value)*5;
                        $("#display2").html(sliderValue);
                        }});

  });
  </script>
</head>
<body>



<div id="slider"></div>
<div id="display"></div>
<div id="display1"></div>

<br>

<div id="slider2"></div>
<div id="display2"></div>

Open in new window

From looking at the wonka example I think you want to perform math between the two sliders and output that total as well...

Create two variables that are not local scoped variables.

so before the first $("#slider").slider piece of code set two variables that since they are outside of your function will be global.

var slideOneVal = 0;
var slideTwoVal = 0;



$(document).ready(function() {

var sliderOneVal = 0;
var sliderTwoVal = 0;

	$("#slider").slider({ value: 50, min: 1, max: <?php echo $max;?>,
								slide: function(event, ui) {
											var sliderOneVal = ui.value;
											$("#display, #display1").html(sliderOneVal);
											sumVals();
											}});
	$("#slider2").slider({ value: 50, min: 1, max: <?php echo $max;?>,
								slide: function(event, ui) {
											var sliderTwoVal = ui.value;
											$("#display2").html(sliderValue);
											sumVals();
											}});

});

function sumVals() {
	var sliderTotal = 0;
	// change this to the math you want to perform
	// this is multiplying sliderOn times sliderTwo with sliderTwo multiplied by 5
	// it would then display the sum total in another div
	sliderTotal = parseInt(sliderOneVal) * (parseInt(sliderTwoVal)*5);
	$("#displayTotal").html(sliderTotal);
}

Open in new window

Do more with

Expert Office
Submit tech questions to Ask the Experts™ at any time to receive solutions, advice, and new ideas from leading industry professionals.

Start 7-Day Free Trial