Vue-slider-component: [Vue-slider warn]: Prop[interval] is illegal, Please make sure that the interval can be divisible

[lumberman]

Thanks for this amazing component!

I have a warning in console:
[Vue-slider warn]: Prop[interval] is illegal, Please make sure that the interval can be divisible

My parameters are:
'min': 0,
'max': 4,
'interval': 0.1

What am I doing wrong?
Thanks for your help!

[NightCatSama]

There is such a problem, in the case of the interval is a decimal, there will be such a problem 4 % 0.1 = 0.09999999999999978.

I will fix the bug as soon as possible and post a new version.

Thank you for the issue

[NightCatSama]

Now you can solve this, just like:

min: 0,
max: 40,
interval: 1,
formatter: (val) => val/10,

[lumberman]

Thank you very much for such a quick reply!

[NightCatSama]

Has been repaired well:), you can update to the latest version.

[lumberman]

I updated packages with npm update. It shows [email protected] now.
For some reason warning in console didn't disappear and I still get 'ugly' numbers like 0.15000000000000002.

Thanks for your help.

[NightCatSama]

Can you tell me your configuration.

[lumberman]

Sure, here it is:

import vueSlider from 'vue-slider-component'

export default {

    components: {
        vueSlider
    },

data: function () {
    return {
        settingTempValue: null,
        settingUnits: false,

        slider: {
            default: {
                'tooltip' : 'false',
                'speed' : 0.1,
                'width' : '60%',
                'style' : {
                  'padding': '12px 4px',
                  'margin': '2px 0 0'
                }
            }
        }
    }
},

Then I add additional settings if need (min/max/intervale) beforeMount:

beforeMount: function () {
    /**
     * Check if there are additional slider settings present?
     */

    if ( this.settingStruct.min !== undefined ) {
        this.slider.default['min'] = this.settingStruct.min
    }

    if ( this.settingStruct.max !== undefined ) {
        this.slider.default['max'] = this.settingStruct.max
    }

    if ( this.settingStruct.interval !== undefined ) {
        this.slider.default['interval'] = this.settingStruct.interval
    }

I define additional parameters for the slider like this:

'letter-spacing' : {
    'label' : 'Letter Spacing',
    'type' : 'slider',
    'cssProperty' : 'letter-spacing',
    'min': -10,
    'max': 10,
    'interval': 0.25,
    'units': [
        'px'
    ]
}

[NightCatSama]

Has been repaired, sorry I didn't take into account the minus cases.

update to the [email protected]

[lumberman]

Amazing. Please, let me know if you have a PayPal account. I want to make donation.

[NightCatSama]

Thank you, you will enjoy is enough.:blush:

[devorld]

Hello! I met situation with same error message.
My initial bindings:

:value="sliderRange",
:min="min",
:max="max",
:interval="sliderStep",
:tooltip="false"

My values:

data() {
  return {
    sliderRange: [ 4, 5 ],
    min: 4,
    max: 6.300000190734863
  };
},

computed: {
  sliderStep() { return (this.max - this.min) / 1000; }
}

I logged all values and operations in condition for this error :

total () {

          console.log('this.maximum =', this.maximum);
          console.log('this.minimum =', this.minimum);
          console.log('this.maximum - this.minimum =', this.maximum - this.minimum);
          console.log('this.multiple =', this.multiple);
          console.log('((this.maximum - this.minimum) * this.multiple) =', ((this.maximum - this.minimum) * this.multiple));
          console.log('~~((this.maximum - this.minimum) * this.multiple) =', ~~((this.maximum - this.minimum) * this.multiple));
          console.log('this.interval =', this.interval);
          console.log('(this.interval * this.multiple) =', (this.interval * this.multiple));
          console.log('whole expression', ~~((this.maximum - this.minimum) * this.multiple) % (this.interval * this.multiple));
          console.log('check if !==0 result =', ~~((this.maximum - this.minimum) * this.multiple) % (this.interval * this.multiple) !== 0);

        if (this.data) {
          return this.data.length - 1
        } else if (~~((this.maximum - this.minimum) * this.multiple) % (this.interval * this.multiple) !== 0) {
            console.error('[VueSlider error]: Prop[interval] is illegal, Please make sure that the interval can be divisible')
        }

          console.log('return (this.maximum - this.minimum) / this.interval:', (this.maximum - this.minimum) / this.interval);

        return (this.maximum - this.minimum) / this.interval
      }

and got this:

It seems to me the reason is in ~~ operation for large values, if I understood correctly purpose of it in this expression.

[NightCatSama]

@devorld You're right, ~~ exception when dealing with large numbers.

But not only for this reason, you can try 6.300000190734863 - 4 on the console, the result is 2.3000001907348633, an extra of 0.000000000000003.

[devorld]

I suspected that JavaScript inaccuracy in working with float numbers can be the reason of this unwanted result in expression. But before trying to solve situation with adapting value which I bind to prop "interval", I decided to ask if some changes will be made in "vue-slider-component" for such situtions.
If not - no problem, I'm just wondering.

[NightCatSama]

@devorld Thank you, I have fixed the potential bug caused ~~.

[devorld]

Thanks, that you are so responsive!

I have tested with the same values and continue getting error message, but I think I understood the idea of this check.

We are checking if our range (this.max - this.min) divides by step (this.inteval) without remainder, am I right?

Like when we have min = 0, max = 10 and step between internal points interval = (max-min) / 10.

I thought that there will be problem with achieving max value, but I've tested, and component greatly work with that case.

To summarize:

• this error message is just to make developer know, that all points on slider doesn't have absolutely same interval between them, am I right?
• no other problems we are getting in such situation with impossibility to divide range by step without remainder? except little inaccuracy in interval between points

P.S.: Can you add some flag or condition, to switch off this notification in production mode? For example

} else if ((Math.floor((this.maximum - this.minimum) * this.multiple) % (this.interval * this.multiple) !== 0) &&
    (process && process.env && process.env.NODE_ENV !== 'production')) {
    console.error('[VueSlider error]: Prop[interval] is illegal, Please make sure that the interval can be divisible')
}

[NightCatSama]

@devorld You are right, these error messages are only for developers to see, I will be removed in the production environment

[NightCatSama]

@devorld Added debug prop, version has been updated.

[devorld]

@NightCatSama Thanks a lot!

And sorry for my importunity, but I misled you with process.
I've tested and it can't be achieved in component when it distributed as npm package, not a part of application source.
It seems that we must make:

debug: {
  type: Boolean,
  default: true
},

[NightCatSama]

@devorld Thank you, the version has been updated.