frame slider problem

HTML

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css">
<div class="ui-draggable-iframeFix" style="background: #fff;"></div>
<iframe id="main" src="http://fiddle.jshell.net/techunter/rQr5Q" width="100%" height="500"></iframe>

CSS

.behind,.front{
    width:200px;
    height:100px;
}

JavaScript

$(function(){
    
    $('iframe').ready(function(){
         var $document = $('#result iframe',$('#main').contents()).contents();
        $('.slider',$document).slider({start:function(event,ui){return false;}});

    $(document).mouseup(function(){
        $('.slider,.ui-slider-handle',$document).unbind('mousemove') 
    })
    
    $('.ui-slider-handle',$document).mousedown(function(e){
        e.preventDefault();
        return $(this).parent().mousedown()})                
    $('.slider',$document).hover(function(){
        $('.slider',$document).mousedown(function(){
               $(this).bind('mousemove',function(e){
               $(this).slider('value',e.pageX*100/$(this).width())
            });             
        }).mouseup(function(){
               $(this).unbind('mousemove');
        })},function(){
                     $( '.slider',$document ).unbind('mousemove'); 
    }) 
            
    })
});