jquery ui slider / proportional handle, with another slider controlling the width of handle

demo of attempts at jquery ui slider with proportional handle but it fails (1) if click not in middle of handle (2) if size of handle is > 50%

by hrabinowitz

HTML

<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<h1>
  demo of attempts at jquery ui slider with proportional handle
</h1>
<div id="proportionalSlider">
  <div id="custom-handle" class="ui-slider-handle">
  </div>
</div>
<br>
<br>
<div id="metaSlider">
	<div id="meta-handle" class="ui-slider-handle">
	</div>
</div>

CSS

div#proportionalSlider div#custom-handle.ui-slider-handle {
  width: 120px;
  height: 1.6em;
  top: 50%;
  /*margin-top: -.8em;*/
	/*margin-left: -60px;*/
	margin-left: 0px;
  text-align: center;
  line-height: 1.6em;
}

#proportionalSlider, #metaSlider {
  width: 80%;
}

JavaScript

var $handle = $("#custom-handle");			
	var diffWidth;
	var maxSliderValue;

  $("#proportionalSlider").slider({
    create: function() {
      $handle.text($(this).slider("value"));
    },
    slide: function(event, ui) {
			//debugger;
			var $handle = $(ui.handle);
			console.log("$handle", $handle, $handle.attr('left'), $(ui.handle)[0].offsetLeft, ui.value);
			/*
			if (diffWidth === undefined) {
			  	  diffWidth = $('#slider').width() - $handle.width();
			}
			//console.log("ui.value", ui.value, "event.clientX", event.clientX, "diffWidth", diffWidth);
			// minus 10 is for offset of slider from left edge
			if (event.clientX - 10 > diffWidth) {
			*/
			if (ui.value > maxSliderValue) {
				console.log("RETURN");
				event.preventDefault();
				return;
			}
      $handle.text(ui.value);
    }
  });
	
	var $metaHandle = $('#meta-handle');
	$('#metaSlider').slider({
    create: function() {
      $metaHandle.text($(this).slider("value"));
    },
    slide: function(event, ui) {
      $metaHandle.text(ui.value);
			$('#custom-handle').css('width', ui.value + '%');
			diffWidth = $('#slider').width() - $handle.width();
			maxSliderValue = Math.round(100 - $handle.width()/$('#proportionalSlider').width()*100);
			console.log("maxSliderValue", maxSliderValue);
    }	
	})