5 Answers, 1 is accepted
It looks like the slider does not support such dynamic setting of the min and max settings and you will need to destroy and re-initialize the whole slider.
Here are all the methods that are currentlyavailable :
http://demos.kendoui.com/web/slider/api.html
Kind Regards,
Petur Subev
Telerik
Rank 1
I tried
- without destroy
- with destroy
- with destroy and remove
The slider is a widget which turns the input into invisible one and wraps it inside several elements. You need to pull out the slider input element before re-initalizing it and also make it visible.
Here is how I modified your example to make it work.
<!DOCTYPE html><html><head> <title></title> <link href="http://cdn.kendostatic.com/2014.2.1008/styles/kendo.common.min.css" rel="stylesheet" /> <link href="http://cdn.kendostatic.com/2014.2.1008/styles/kendo.default.min.css" rel="stylesheet" /> <link href="http://cdn.kendostatic.com/2014.2.1008/kendo.dataviz.min.css" rel="stylesheet" /> <link href="http://cdn.kendostatic.com/2014.2.1008/styles/kendo.dataviz.default.min.css" rel="stylesheet" /> <link href="http://cdn.kendostatic.com/2014.2.1008/styles/kendo.mobile.all.min.css" rel="stylesheet" /> <script src="http://cdn.kendostatic.com/2014.2.1008/js/jquery.min.js"></script> <!-- <script src="../kendo-ui-pro/js/angular.min.js"></script> --> <script src="http://cdn.kendostatic.com/2014.2.1008/js/kendo.all.min.js"></script></head><body> <div id="forms" data-role="view" data-title="Form Elements" data-init="initForm" data-use-native-scrolling="true"> <h3>http://demos.telerik.com/kendo-ui/mobile-forms/index</h3> <form action="./index.html"> <ul data-role="listview" data-style="inset"> <li> <label>Slider <input id="slider" type="range" /> </label> </li> </ul> </form></div><script> function initForm() { var body = $(".km-pane"); if (kendo.ui.Slider) { $("#slider").kendoSlider({ min: 5, max: 100, value: 50, // tooltip: { enabled: false }, change: function(e) { alert("new value is " + e.value + " + destroy + init"); } }); var slider = $("#slider").data("kendoSlider"); var wrapper = slider.wrapper; var element = slider.element; slider.destroy(); wrapper.before(element.show()); wrapper.remove(); $("#slider").kendoSlider({ min: 300, max: 3000, value: 350, change: function(e) { alert("new value is " + e.value); } }); } }</script><script> var app = new kendo.mobile.Application(document.body);</script></body></html>I hope this helps.
Regards,
Petur Subev
Telerik
Rank 1
Iron
Iron
Iron
Hi Sven,
I tested the destroying and recreating of the RangeSlider locally. However, the min and max values are set as expected. Note, that for some options you could use the setOptions method.
In the Dojo example linked here, the RangeSlider can be recreated on a button click using the snippet marked in orange from the previous reply. Also using the setOptions method is demonstrated for setting new min and max values.
Could you please try to modify the example in order to replicate the behavior the way it is on your side and send it back so we could have a closer look?
Looking forward to your reply.
Regards,
Neli
Rank 1
Iron
Iron
Iron
I now use destroy + redraw only on my kendoSlider .. the rangeSlider is handled via setOptions and values()
I also found a solution for my other problem asked here in the forums - but it's not really satisfying
When I started the programming task I was given specific numbers for min, max and so on - then later "they" decided to read those values from a database query. The initial values they told me were only 780, now I always read 800.
The initial code piece that draws the rangeslider is included in a <script tag directly embedded in the index.html file, while the resizing / setOptions is done in a js-file.
I found that I had to "hard code" the change from 780 to 800 - now it works like expected, while previously it was drawn to 780 then later scaled. The main problem for me seems that setOptions is applied later than setting new values via .values( array) ..
Hi Sven,
I am glad to hear you managed to find solutions to the issues.
Regarding the problem with the setOptions() and values() method, I will appreciate it if you could send us a small runnable example where the issue is replicated, so I could understand the scenario better and advise you further.
Regards,
Neli
Rank 1
thank you very much for your answer, that worked. Maybe the wrapper trick could be helpful for other programmers to mention in
http://docs.telerik.com/kendo-ui/framework/widgets/destroy
But the problem leads to another question: I think it would be better in general to change slider options by "setOptions" in order to avoid potential memory leaks. But this works not correct for the slider with max (only the last value on the axis is transformed). So my questions are:
(a) General: Is there a rule when setOptions work / does not work or need it to be tested in each case
(b) For the slider: Is there a function to be called after change the max value in order to adjust the other values on the slider axis
Best
Kendo Slider does not provide SetOptions method or any similar function to achieve your goal.
http://docs.telerik.com/kendo-ui/api/javascript/ui/slider
Feel free to suggest the setOptions function as an improvement idea on our official feedback portal (give reference to the current thread).
http://feedback.kendoui.com/
Kind Regards,
Petur Subev
Telerik