title: Show increasing and decreasing values on noUiSlider
body: <p>I'm using a noUiSlider with one handle and a range from 0 to 50. I'm trying to show the increasing value of the slider on an input field to the left of the slider and the diminishing value on the right - as in the below example:</p>
  
  <p><a href="https://i.stack.imgur.com/8UC3H.png" rel="nofollow noreferrer">Slider</a> </p>
  
  <p>Has anyone else tried to do this or know how it can be achieved? </p>
  
  <pre><code>var connectSlider = document.getElementById('slider');
  
  noUiSlider.create(connectSlider, {
  start: 20,
  tooltips: true,
  decimals: 0,
  connect: [true, false],
  range: {
    'min': 0,
    'max': 50,
  },
    format: wNumb ({decimals:0})
  }); 
  
  var inputFormat = document.getElementById('slider-value');
  
   sliderFormat.noUiSlider.on('update', function( values, handle ) {
  inputFormat.value = values[handle];
  });
  
  inputFormat.addEventListener('change', function(){
  sliderFormat.noUiSlider.set(this.value);
  });
  $("#slider").Link('lower').to('#slider-value',function(value){
  $(this).val(Math.abs(value));
  });
  </code></pre>
  
  <p>Here it is in <a href="https://jsfiddle.net/dotwebs/wk27j7sL/13/" rel="nofollow noreferrer">jsfiddle</a></p>
  
  <p>I managed to get the left value to display on the screen but don't know how to bind it to the input field. And I don't know how to get the value on the right. I assume this should be 'max value' minus 'slider value' but don't have enough knowledge of JavaScript so I would really appreciate some help with this :)</p>