After Update: [VueSlider error]: The prop "interval" is invalid, "(max - min)" cannot be divisible by "interval"

[jamiehunterdesign]

My otherwise working sliders are now broken after updating from v2 to v3:

[VueSlider error]: The prop "interval" is invalid, "(max - min)" cannot be divisible by "interval"

Without posting my code yet, are there any obvious reasons why this may be happening that I can investigate?

Some of the sliders still function, but the ones that have "interval="0.001" do not.

Thanks

[NightCatSama]

Can you provide the min/max/interval of the component that gave the error?

[jamiehunterdesign]

The min and max values are set dynamically, but in my example they are "0" and "17.738". The interval is "0.001". It shows the values correctly on load:

However, when I interact with the slider I get this:

[VueSlider error]: The type of the "value" is illegal

[NightCatSama]

Please try to restore the error.

https://jsfiddle.net/NightCatSama/2xy72dod/10419/

[jamiehunterdesign]

It's very difficult to recreate the error as all the data is dynamic and running multiple sliders. As the sliders worked perfectly fine before updating, I guess my main question is what has changed that may be breaking my sliders in v3. They are all range sliders and the only broken ones are the ones with defined integers. Thanks for any help, I appreciate it's difficult without code examples.

[NightCatSama]

You can try to print the error parameter at @error. (example)

Is it possible that it is the same error as issue#343

[kbirk]

I have a use case where the min / max values of the slider are dynamic floating point values. This exception is thrown constantly because of issues with floating point precision.

Here is a fiddle outlining the issue: https://jsfiddle.net/1n3Lmcuz/

Currently I am getting around this issue by using normalised interger values from 0 to 100 for the slider and then mapping those values to the actual values I want.

[NightCatSama]

@kbirk

The inside of the component is calculated with precision, but you may have a result of loss of precision by dividing it by 100 on the outside, and then the component can't calculate the correct result and cause an error.

You can use data so that components don't internally compute values.

https://jsfiddle.net/NightCatSama/x0r8kug6/2/

[Zyles]

Min: 1 000 Max: 600 000 Interval: 5 000

How do I make this work?

[svdmitrij]

Are any updates for the issue? I've faced with same ones.

[btbritz]

@svdmitrij Did you figure anything out? Running into the same issue.

[Krato]

For me works just changing the interval prop to: 0.01

[nwaughachukwuma]

When dynamically setting the max, you should ensure that the number of decimal places in the max matches the interval. For example:

{min: 0, max: 100.5, interval: 0.1}

or 

{min: 0, max: 100.55, interval: 0.01}

This way, it's possible to get to the max from the min using the interval.

[MohammedAyman2018]

Hey there, sorry for annoying but I've the same issue and in my case. The project is using nuxt and bootstrapVue. The step is the interval. I've two instances in the page. both of them gives the same error but the first one doesn't work. The first one data: The second one data:

And this is the component: template: the script:

And this is how I use it: And the other instance:

Everything was working before the update. But I think I did something wrong. would be great if someone can help. And thanks for your great slider.

[NightCatSama]

@MohammedAyman2018 As the error suggests, 22222 is not divisible by 1000, so the error is reported.

[MohammedAyman2018]

@MohammedAyman2018 As the error suggests, 22222 is not divisible by 1000, so the error is reported.

Thanks, I solved the issue by round the max to the next multiple of the interval and it worked. it will be better if you notified about it in the docs: const max = maxVal + (interval - (maxVal % interval)

Thanks again.

[mosinve]

@MohammedAyman2018 As the error suggests, 22222 is not divisible by 1000, so the error is reported.

but why it's not divisible? it will be 22.222 ... prevoiusly it worked.... any other components i found also don't have this issue...

[mosinve]

I have beed used your component for a 2 years and didn't have such issue.... but somehow my product is now broken. i'm using slider for money input range, where min and max defined by business needs and i can't just change them to be slightly more or less. Please try to solve this issue. and tell me why slider with min 1 max 6000 and step 100 can't be implemented by your component anymore?

[mosinve]

https://jsfiddle.net/cihkem/bw124prj/ - example how should work slider

[NightCatSama]

@mosinve Because the interval between sliders is fixed. For example, the difference between 1 and 10 is 9, and the difference between 10 and 20 is 10, so it is not reasonable.

So either set min to 0, or use data.

[sunscreem]

I've suddenly got this issue too and I've no idea why its started now or what's changed. Only removing the interval from the component sorts it.

Is it possibly crashing as the my interval is set to 10000 when the component starts, but the initial values of min and max are both at 0? This didn't cause issues before :(

[tylik1]

I also face this issue. I have a range slider between 2 dates. I'm doing interval of 1 day, and min -> 1, max -> random number of days But what if i want to do interval of 7 days, and 30 days. This is not possible, because not all max-min values are divisible by 7 and 30

It would be good if slider could automatically calculate if it is possible to move interval between start and end values, and if not, then do the step which is possible between start and end values.

[w00fz]

@mosinve Because the interval between sliders is fixed. For example, the difference between 1 and 10 is 9, and the difference between 10 and 20 is 10, so it is not reasonable.

So either set min to 0, or use data.

It's fairly common to have min 1 and suggesting to use 0 might not be an option. Also if a slider is dealing with large numbers, using data is not a viable solution either.

I see why this is the way it is but maybe what's missing here is a way to define steps so that no matter the min and max, the range can be customized based on value.

For example I have a very large slider that goes from 1 to 10,000,000 and I'm trying to make the interval dynamic so that it is of increments of 1 up until 100, then increments of 500 up to 100,000 and then increments of 1,000 all the way to max.

This is currently not possible because of this min/max/interval check issue where (10000000 - 1 / 100) = 9,999,999.99.

[hoangvu12]

I solved it by do Math.round on value and max.

[Ankumo]

Will it be changed someday? Really wished there'll be just an prop or option to disable this strict interval check. I want to show clients exact min and max limits which can even have hundred thousandths, but using 0.01 interval. Unfortunatelly I don't have much time to make a PR and haven't looked how is it working, but I think you can just round min and max on your end to properly calculate slider steps. Then if it's suddenly goes over the limits equate them to those limits