IonDen / ion.rangeSlider

jQuery only range slider
http://ionden.com/a/plugins/ion.rangeSlider/en.html
MIT License
2.55k stars 506 forks source link

destroy() method not removing everything #571

Closed KzooDrew closed 4 years ago

KzooDrew commented 6 years ago

The destroy() method is leaving something attached to the original input element because if I create a slider on an input, slide the from and to values around, destroy() the slider, clear the input element value, and then re-create the slider on that same input the from and to handles are positioned where they were left from the previous instance.

My workaround is to use jquery to .remove() the input element from the DOM after calling the destroy() method and then appending a new input element back into the DOM before re-creating a new slider on that element.

The attached file shows the related parts of the JS and HTML code that I am using. I am using bootstrap 3.3.7, jquery 3.1.1, and Ion.RangeSlider 2.2.0

rangeslider_example.txt

FYI - yes I know about the update() method. I have tried passing new slider parameters via update() but the order in which rangeSlider sends values to the prettify function reference is not consistent when update() is called which breaks the custom formatting I am doing.

IonDen commented 6 years ago

Could you elaborate on what is wrong with the order, if using update method?

KzooDrew commented 6 years ago

There isn't anything technically wrong with the order since the documentation doesn't specifically say that the order in which the num values are sent to the prettify function reference are always sent in the same order. The prettify function reference I am using only works when the order is known since I want to leave the given num value as-is for all of the grid markers and only change the num value for the slider handles. When the slider is first instantiated all of the grid marker values are sent first followed by the slider handles. After instantiation, when calling update(), the order in which the grid marker values and the slider handle values seem to be random and definitely are not grid markers first followed by slider handles which then makes it impossible to determine which num values to leave as-is and which ones to change. This is why I am destroying the slider instead of using update because at least the order of values sent on instantiation is always the same. However, destroy is leaving something attached to the original input element so destroying one slider and recreating another on the same input element is not possible resulting in the extra hassle of removing the input element from the DOM and creating a brand new one before re-instantiating the new slider. I suspect that destroy is not getting rid of, or clearing out, some data attribute values. I have tried clearing the ones that are mentioned in the doc (data-min, data-max, data-from, data-to, etc) including the one that the plugin stores it class reference in, data-ionRangeSlider, but even then when recreating a new slider it is retaining the slider from to position values from the previous slider instance and not using the from/to given. As mentioned in the original post, I am also clearing the element input value as well so I know it's not just using any previous value sitting in the input element either. I hope this clarifies the overall issue.