slider.js

jQuery.fn.slider = function() {
  var handle = this;
  
  function drag_handler(e) {
    // offset the mouse position half of the handles width
    var pos = e.pageX;
    var container = handle.siblings('.slider_bar');
    var offset = container.offset()
    pos = Math.min(Math.max(pos, offset.left), offset.left + container.width());
    
    // early exit if drag outside container bounds
    // if(  pos < container.offset().left
    //   || pos > container.offset().left + container.width()) return;
    
    // position the handle
    var sliderOffset = pos - container.offset().left;  
    handle.css('left', sliderOffset - (handle.width()/2));
  
    // sliderchange is an event that will fire on the slider
    // element, listen to it to make adjustments to the page  when the slider moves
    // $('#slider_handle1').bind('sliderchange', function(percent) {
    //  // do something
    // });
    var percent = sliderOffset / container.width();
    handle.trigger('sliderchange', percent);
  }

  // when the mouse is released, stop moving the slider
  function release_handler(e) {
    jQuery('html').unbind('mousemove', drag_handler);
  }

  handle
    .mousedown(function(e) {
      // wire up the listeners, only listen for mouseup once
      jQuery('html')
        .mousemove(drag_handler)
        .one('mouseup', release_handler);
        
      e.preventDefault();
    });
    
  return this;
};

jQuery(function($) {
  $('#slider_handle1')
     .slider()
     .bind('sliderchange', function(e, percent) {
       var fill = $(this).siblings('.slider_fill');
       var bar  = $(this).siblings('.slider_bar');
       var width = bar.width() * percent;
       fill.width(width);

       $('score').html(10 * percent);
    });
});