Problems using enforceRange/enforceStep

[richardkhchang]

Hi,

I'm currently trying to use this control to create a price range filter.

This is my slider:

$scope.slider = {
                minValue: 1,
                maxValue: 10000,
                options: {
                    floor: 1,
                    ceil: 10000,
                    enforceStep: false,
                    enforceRange: false,
                    mergeRangeLabelsIfSame: true,
                    showTicks: true,
                    pushrange: true,
                    stepsArray: [
                        { value: 1 },
                        { value: 10 },
                        { value: 20 },
                        { value: 50 },
                        { value: 100 },
                        { value: 200 },
                        { value: 500 },
                        { value: 1000 },
                        { value: 5000 },
                        { value: 10000 }
                    ]
                }
            };

And this is my front-end markup:

<rzslider rz-slider-model="slider.minValue"
              rz-slider-high="slider.maxValue"
              rz-slider-options="slider.options"></rzslider>

<label for="minPrice">Min $</label><input type="number" id="minPrice" name="minPrice" ng-model="slider.minValue" ng-model-options="{updateOn: 'blur', allowInvalid: false}" min="{{slider.options.floor}}" max="{{slider.maxValue}}" required>
<label for="maxPrice">Max $</label><input type="number" id="maxPrice" name="maxPrice" ng-model="slider.maxValue" ng-model-options="{updateOn: 'blur', allowInvalid: false}" min="{{slider.minValue}}" required>

As you can see, I have both the angularjs-slider as well as two "number" textboxes hooked up to the same model, "slider.minValue", and "slider.maxValue". When the slider is manipulated, the values in the textbox correctly update to the selected value in "stepsArray". This much is working correctly.

However, I want to allow the user to enter into the textboxes a specific price range that does not perfectly match the values in the "stepsArray". I was hoping that doing this would move the slider to the appropriate position between the defined steps, and that subsequent slider movements would snap the values back in sync with the "stepsArray".

Looking at readme.md, I'm under the impression that the enforceStep or enforceRange properties would allow me to do this by setting one or the other to false.

enforceStep - Boolean (defaults to true): Set to true to force the value to be rounded to the step, even when modified from the outside.. When set to false, if the model values are modified from outside the slider, they are not rounded and can be between two steps.

enforceRange - Boolean (defaults to false): Set to true to round the rzSliderModel and rzSliderHigh to the slider range even when modified from outside the slider. When set to false, if the model values are modified from outside the slider, they are not rounded but they are still rendered properly on the slider.

However, in practice, regardless of whether or not these properties are set to false, whenever I change the value of the min or max price in the text boxes, the slider does not respect this quantity and always moves the slider/textbox value back to the value "1".

Please let me know if what I want to do is possible or if I'm misunderstanding how enforceStep and enforceRange are supposed to work.

Thanks,
Richard Chang

[ValentinH]

Well, this is because it is not supposed to be used with the stepsArray option. I can see what you are trying to do, but this is not possible with the current version of this library...

[jsanroman]

I had the similar problem, and I think your problem is the data type of price. You set a integer values as a price in slider, but the input text change this value to string. @richardkhchang, you can change values to string type:

stepsArray: [
  { value: '1' },
  { value: '10' },
  { value: '20' },
...

@ValentinH this behavior is because in the method findStepIndex the step index is finding by value and type value also, I think this is OK :)

if (step **===** modelValue) {
  index = i;
  break;
}
else if (angular.isObject(step) && step.value **===** modelValue) {
  index = i;
  break;
}

[richardkhchang]

Looking through the scripts themselves, it doesn't look like the existing library does what I was hoping it would do regardless of the fix above (it looks like there is no support for sliding to a value that does not exactly match a value specified in the stepsArray).

I'll find a workaround. Thanks anyways.

[ValentinH]

Indeed, the closest thing that can be done is to use a value greater than 1 for showTicks/showTicksValues...

[ViieeS]

@ValentinH any progress with this? Can I use stepsArray option together with enforceStep?

[ValentinH]

This is not supported and I think it won't be trivial to support this. However, if you really need this, you can submit a PR. 🙂