Prevent slider pointer from rendering outside slider bounds.

[vitamink]

I have 2 way binding between a slider and a text box. It is perfectly acceptable for the value entered in the text box to be outside the bounds of the slider's min/max, but when this is the case the pointer is rendered "outside" of the slider bar.

I have made a "fix" to the source to ensure that the pointer always shows on the bar (at the beginning or end, if outside the min/max bounds), and can create a pull request if you think this is a feature you'd like to integrate.

[ValentinH]

Actually, in #158 (https://jsfiddle.net/kur7d101/embedded/result/), I have added something like this but I don't know if the behavior match what you are expected:

• when setting a value that is above the ceil, the internal model of the slider is set to the ceil value but at the next update, it will update the scope value.

[vitamink]

What you describe sounds about right. Rather than guess, nothing "talks" better than code...

This is what I changed/added:

valueToOffset: function(val)
{
  return (this.sanitizeOffsetValue(val) - this.minValue) * this.maxLeft / this.valueRange || 0;
},

/**
 * Ensure that the position rendered is within the slider bounds, even if the value is not
 *
 * @param {number} val
 * @returns {number}
 */
sanitizeOffsetValue: function(val)
{
  return Math.min(Math.max(val, this.minValue), this.maxValue);
},

For me, the advantage of doing it this way is that the "bubble" shows the actual value, giving extra visual feedback to the user as to the true state of the model.

Thanks for the hard work from you guys! This is a really useful module, and I can see that a lot of effort has been put in to creating and maintaining it.

[ValentinH]

Indeed this seems to be a better solution than mine, I'll add it to my refactor PR.

[vitamink]

Cool, I'm glad it was useful.

[ValentinH]

Will be in 2.0.0 release