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" />

    $('#slider-constraints').slider("value", 0);
                $('#slider-constraints').slider("constraints", [0, 0]);

                $("#slider-constraints").slider({
                    max: document.mediaPlayer.SelectionEnd,
                    animate: true,
                    range: $R(0, document.mediaPlayer.SelectionEnd),
                    values:(0,document.mediaPlayer.SelectionEnd),
                    value: val,
                    enforceConstraints: false,
                    slide: function(event, ui) {
                        document.mediaPlayer.currentPosition = ui.value;
                        $('#slider-constraints').slider("constraints", [0, ui.value]);
                        $('#slider-constraints').slider("value", ui.value);
                    },
                    start: function(event, index) {
                        document.mediaPlayer.currentPosition = index.value;
                        $('#slider-constraints').slider("constraints", [0, index.value]);
                        $('#slider-constraints').slider("value", index.value);
                    }
                });
            }
            // Haldler position
            window.setInterval(function() {

                if (document.mediaPlayer.PlayState != 2 && document.mediaPlayer.PlayState == 0) {
                    $('#slider-constraints').slider("constraints", [0, 0]);
                    $('#slider-constraints').slider("value", 0);
                }
                else {
                    $('#slider-constraints').slider("constraints", [0, document.mediaPlayer.currentPosition]);
                }

            }, 3000);

            // Progressbar position
            window.setInterval(function() {
                if (document.mediaPlayer.PlayState != 2 && document.mediaPlayer.PlayState == 0) {
                    $('#slider-constraints').slider("constraints", [0, 0]);
                    $('#slider-constraints').slider("value", 0);
                }
                else {
                    $('#slider-constraints').slider("value", document.mediaPlayer.currentPosition);
                }
            }, 3000);
        }

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