Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- 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);
- });
- });
Add Comment
Please, Sign In to add comment