It is possible for slider to go above/below ceiling/floor values with changes to the model

[TikiTDO]

I encountered a use case where the rzSliderModel could be changed by user input in a separate field to be outside the ceil/floor range. I fixed this for my own use case by introducing an extra check into the rzSliderModel watch expression to ensure that the scope.rzSliderModel value was within the required range, gated by an "enforceRange" parameter.

If this is functionality you would like to incorporate, I could submit pull request. Please let me know if you are interested.

[ValentinH]

I'm not sure to understand, you want the slider to have a value that is outside the min/max range?

[TikiTDO]

Not quite. The problem was that I had a text input with an ng-model="model_name" and a slider with an rz-slider-model="model_name" rz-slider-options="{floor: x, ceil: y,...}"

The behavior I found was that I could change the text input to be a value higher that y, or lower than x. To resolve this I made a change to the rzSliderModel watcher function so that it has the option to check the model value against the limits, and force it to stay within the slider constraints.

This is a specific case for a client, so I'm not sure if this is desirable behavior from your point of view, but I figured I'd offer it if you were interested.

[ValentinH]

Indeed I forgot about this behaviour because it was added quite recently following #159 .

I think we could add an option to force the value to be within range, it should be pretty easy.

[TikiTDO]

Here is my solution for your reference:

this.scope.$watch('rzSliderModel', function(newValue, oldValue) {
  if (newValue === oldValue)
    return;

  // Ensure that the model does not leave the bounds denoted by the slider
  if (self.options.enforceRange) {
    if (self.options.floor != null && self.options.floor > self.scope.rzSliderModel)
      self.scope.rzSliderModel = self.options.floor

    if (self.options.ceil != null && self.options.ceil < self.scope.rzSliderModel)
      self.scope.rzSliderModel = self.options.ceil
  }

  thrLow();
});

[ValentinH]

I'm currently looking at the best way to implement it. I think we should do this check in the setMinAndMax method here https://github.com/angular-slider/angularjs-slider/blob/master/src/rzslider.js#L616.

[TikiTDO]

I actually started there, but due to the throttling mechanism I would sometimes get invalid values if I typed fast enough.

[ValentinH]

Here's how I'll do it:

if (this.options.enforceRange) {
   this.scope.rzSliderModel = this.sanitizeValue(this.scope.rzSliderModel);
   if (this.range)
      this.scope.rzSliderHigh = this.sanitizeValue(this.scope.rzSliderHigh);
}

I'm updating the readme to document it and I commit/push ;)

[TikiTDO]

That looks pretty good to me, thanks 👍

[ValentinH]

Will you need a new release right now (do you use NPM?)?

[TikiTDO]

Nah, I'm not in a rush. I've already sent it off to the client for validation. I'll include your new version for their next release.