title: Invert horizontal AngularJS Slider Custom Scale
body: <p>I'm using this <a href="https://github.com/angular-slider/angularjs-slider" rel="nofollow noreferrer">AngularJS Slider</a>, the horizontal one. 
  I took the example that has the points divided by a different distance. That example, started from a wide distance, to end with a small distance:
  <a href="https://i.stack.imgur.com/3p7rI.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/3p7rI.png" alt="enter image description here"></a></p>
  
  <p>What I wanted to do, is to invert the scale keeping the numbering.
  This is my code: <a href="https://jsfiddle.net/go8bxcwo/1/" rel="nofollow noreferrer">JSFIDDLE</a></p>
  
  <p>As you can see, I changed the function <code>customValueToPosition</code>: </p>
  
  <pre><code>customValueToPosition: function(val, minVal, maxVal) {
    val = Math.sqrt(val);
    minVal = Math.sqrt(minVal);
    maxVal = Math.sqrt(maxVal);
    var range = minVal - maxVal;
    return (val - maxVal) / range;      
  }
  </code></pre>
  
  <p>There are two problems: The numbers are inverted. I would like to leave from 0 instead of starting 5.
  Then there is a problem with the click of the first and the last value. If you click slightly before the first element (or just after the last item), the selection falls on the opposite value. So, if I just click just before the first element first, select the last one. And viceversa.
  <a href="https://i.stack.imgur.com/y1Xwz.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/y1Xwz.png" alt="enter image description here"></a></p>