jquery slider control issue

Question

Hi All,

I am using slider control to create a progress bar for media player.

Problem:

the max value and slider size is not matching. The video get complete before it reaches the end of the slider.

Code:

    <script type="text/javascript" src="js/jquery.ui.core.js"></script> 
<script type="text/javascript" src="js/jquery.ui.slider.js"></script>     

    <link type="text/css" href="CSS/demos.css" rel="stylesheet" /> 
<link type="text/css" href="CSS/jquery-ui.css" rel="stylesheet" />


         <div  id="slider-constraints" >&nbsp;</div>

Answer 1

You might have better luck setting the max value for the slider to 100 (so that the range of the slider is 0-100) and then setting the interval position of the slider to be a percentage of the media's duration.

For example: A 3 minute media file begins playing (180 seconds). Current playing position of media file is 10 seconds. Slider position should be set to 10/180*100 (or ~ 5 of its 0-100 position).

I've done this before when combining sliders, progress bars and media players. If you want to look at the code I wrote you can take a look at the source code behind this page (notable the jquery.player.js file)