https://www.rabby.info/js/baSlider.js

1$(document).ready(function(){
2  $('.ba-slider').each(function(){
3    var cur = $(this);
4    // Adjust the slider
5    var width = cur.width()+'px';
6    cur.find('.resize img').css('width', width);
7    // Bind dragging events
8    drags(cur.find('.handle'), cur.find('.resize'), cur);
9  });
10});
11
12// Update sliders on resize. 
13// Because we all do this: i.imgur.com/YkbaV.gif
14$(window).resize(function(){
15  $('.ba-slider').each(function(){
16    var cur = $(this);
17    var width = cur.width()+'px';
18    cur.find('.resize img').css('width', width);
19  });
20});
21
22function drags(dragElement, resizeElement, container) {
23	
24  // Initialize the dragging event on mousedown.
25  dragElement.on('mousedown touchstart', function(e) {
26    
27    dragElement.addClass('draggable');
28    resizeElement.addClass('resizable');
29    
30    // Check if it's a mouse or touch event and pass along the correct value
31    var startX = (e.pageX) ? e.pageX : e.originalEvent.touches[0].pageX;
32    
33    // Get the initial position
34    var dragWidth = dragElement.outerWidth(),
35        posX = dragElement.offset().left + dragWidth - startX,
36        containerOffset = container.offset().left,
37        containerWidth = container.outerWidth();
38 
39    // Set limits
40    minLeft = containerOffset + 10;
41    maxLeft = containerOffset + containerWidth - dragWidth - 10;
42    
43    // Calculate the dragging distance on mousemove.
44    dragElement.parents().on("mousemove touchmove", function(e) {
45    	
46      // Check if it's a mouse or touch event and pass along the correct value
47      var moveX = (e.pageX) ? e.pageX : e.originalEvent.touches[0].pageX;
48      
49      leftValue = moveX + posX - dragWidth;
50      
51      // Prevent going off limits
52      if ( leftValue < minLeft) {
53        leftValue = minLeft;
54      } else if (leftValue > maxLeft) {
55        leftValue = maxLeft;
56      }
57      
58      // Translate the handle's left value to masked divs width.
59      widthValue = (leftValue + dragWidth/2 - containerOffset)*100/containerWidth+'%';
60			
61      // Set the new values for the slider and the handle. 
62      // Bind mouseup events to stop dragging.
63      $('.ba-slider .draggable').css('left', widthValue).on('mouseup touchend touchcancel', function () {
64        $(this).removeClass('draggable');
65        resizeElement.removeClass('resizable');
66      });
67      $('.ba-slider .resizable').css('width', widthValue);
68    }).on('mouseup touchend touchcancel', function(){
69      dragElement.removeClass('draggable');
70      resizeElement.removeClass('resizable');
71    });
72    e.preventDefault();
73  }).on('mouseup touchend touchcancel', function(e){
74    dragElement.removeClass('draggable');
75    resizeElement.removeClass('resizable');
76  });
77}