title: How to show value of Jquery slider into multiple dropped divs
body: <p>I'm using jQuery UI slider and drag and drop to create a way of specifying a rating out of 100 for each div.</p>
  
  <p>The problem is when I drag my divs onto the slider, I do not know how to get the value for the position of each div on the slider. Here is a plnk + some code;</p>
  
  <p><a href="http://plnkr.co/edit/wSS2gZnSeJrvoBNDK6L3?p=preview">http://plnkr.co/edit/wSS2gZnSeJrvoBNDK6L3?p=preview</a></p>
  
  <pre><code>$(init);
  
  function init() {
  
    var range = 100;
    var sliderDiv = $('#ratingBar');
  
    sliderDiv.slider({
      min: 0,
      max: range,
      slide: function(event, ui) {
        $(".slider-value").html(ui.value);
      }
    });
  
    var divs = '.itemContainer'
    $(divs).draggable({
      containment: '#content',
      cursor: 'move',
      snap: '#ratingBar',
      revert: function(event, ui) {
        $(this).data("uiDraggable").originalPosition = {
          top: 0,
          left: 0
        };
        return !event;
      }
    });
  
    var position = sliderDiv.position(),
      sliderWidth = sliderDiv.width(),
      minX = position.left,
      maxX = minX + sliderWidth,
      tickSize = sliderWidth / range;
  
    $('#ratingBar').droppable({
      tolerance: 'touch',
      drop: function(e, ui) {
        var finalMidPosition = $(ui.draggable).position().left + Math.round($(divs).width() / 2);
        if (finalMidPosition &gt;= minX &amp;&amp; finalMidPosition &lt;= maxX) {
          var val = Math.round((finalMidPosition - minX) / tickSize);
          sliderDiv.slider("value", val);
          $(".slider-value").html(ui.value);
        }
      }
    });
  
    $(".slider-value").html(sliderDiv.slider('value'));
  
  }
  </code></pre>
  
  <p>Hope someone can offer some advice,</p>
  
  <p>Cheers</p>
  
  <p>(Also, if someone knows why I can drop the divs outside of the rating bar on either side, please let me know!)</p>