ansaurus

Question

how can i create a seekbar in javascript

Answer 1

A:

you can use/customize the slider control provided by jQuery UI to solve your problem

update: the code sample that you have requested in comment. The same sample is uploaded in http://elangovanr.com/samples/jquery/slider.html

<!DOCTYPE html>
<html>
<head>
  <link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"&gt;&lt;/script&gt;
  <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"&gt;&lt;/script&gt;
    <style type="text/css">
    #slider { margin: 10px; }
  </style>
  <script>
      $(document).ready(function () {
          $("#slider").slider(
          {
              min: 0,
              max: 100,
              step: 1,
              change: showValue

          });
          $("#update").click(function () {
              $("#slider").slider("option", "value", $("#seekTo").val());

          });
          function showValue(event, ui) {
              $("#val").html(ui.value);
          }
      });
  </script>
</head>
<body style="font-size:62.5%;">
  <p>
  The jQuery UI Slider plugin makes selected elements into sliders. There are various options such as multiple handles, and ranges. The handle can be moved with the mouse or the arrow keys.
  </p>
  <p>
  This sample demonstrates the simple usage of the slider seek to function.
  For more information about slider, please procedd to http://docs.jquery.com/UI/Slider
  </p>
<div id="slider"></div>
Seek To : <input id="seekTo" type="text" value="10" />
<input id="update" type="button" value="Update" />
Current Value : <span id="val">0</span>
</body>
</html>

Elangovan 2010-05-26 06:16:13

i am new to jquery, didn't get you.any example please

atinder 2010-05-26 08:10:46

try this <!DOCTYPE html><html><head> <link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script> <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script> <style type="text/css"> #slider { margin: 10px; } </style> <script> $(document).ready(function() { $("#slider").slider(); }); </script></head><body style="font-size:62.5%;"> <div id="slider"></div></body></html>

Elangovan 2010-05-26 08:16:42

check the demo and its source in the page http://docs.jquery.com/UI/Slider this might help you

Elangovan 2010-05-26 08:17:52

i have a seekTo() function how can i implement it on slider

atinder 2010-05-26 10:34:58

i have a seekTo(seconds) function how can i implement it on slider

atinder 2010-05-26 10:36:22

thanks a lot for the help :)

atinder 2010-05-26 12:52:07

ansaurus

tags:

views:

answers:

how can i create a seekbar in javascript

related questions