0

I'm using the custom Scale of AngularJS Slider, as you can see here: JSFIDDLE

Now, what I want to is to start from -1. So I changed the options from:

options: {
  floor: 0,
  ceil: 5,
  step: 1
}

To:

options: {
  floor: -1,
  ceil: 5,
  step: 1
}

But this is the result: JSFIDDLE

As you can see, it starts from '0' value and then overlaps '1' and '-1'. How can I have the correct sequence? (-1, 0, 1, 2, 3, 4, 5)

panagulis72
  • 2,129
  • 6
  • 31
  • 71
  • Well you have some logic going wrong with the custom value to position functions: https://plnkr.co/edit/3zyYOQcwbVVkKhWBFzEO?p=preview – pegla Sep 23 '17 at 15:35
  • You need to change customValueToPosition function and not using Math.pow(val, 2) because now you have a situation that Math.pow(-1, 2) is 1, same as Math.pow(1, 2), so you have on one point two values. Make it linear somehow. – lingthe Sep 23 '17 at 15:35
  • Yeah I knew that, but unfortunately I have to use custom Scale and not the linear one – panagulis72 Sep 23 '17 at 15:47
  • Just keep sign while powing. https://plnkr.co/edit/btexaMrlh4A10AFFm8Jj?p=preview – bigless Sep 23 '17 at 16:17
  • @bigless it was exactly what I were looking for. Please write an answer (and not just a comment) so I can choose and approve your answer. Thank you very much! – panagulis72 Sep 23 '17 at 16:53

1 Answers1

1

Keep sign while powing

  customValueToPosition: function(val, minVal, maxVal) {
     val = Math.sign(val) * Math.pow(val,2)
     maxVal = Math.sign(maxVal) * Math.pow(maxVal, 2)
      minVal = Math.sign(minVal) * Math.pow(minVal, 2)
      var range = maxVal - minVal
      return (val - minVal) / range
    },
  customPositionToValue: function(percent, minVal, maxVal) {
    minVal = Math.sign(minVal) * Math.pow(minVal,2);
    maxVal = Math.sign(maxVal) * Math.pow(maxVal,2);
    var value = percent * (maxVal - minVal) + minVal;
    return Math.sqrt(value)
  }

PLUNKER (NOT JSFIDDLE) :)

bigless
  • 2,849
  • 19
  • 31