This is a migrated thread and some comments may be shown as answers.

How do I update the slider max option after creation

5 Answers 895 Views

Slider

This is a migrated thread and some comments may be shown as answers.

5 Answers, 1 is accepted

answered on 16 Oct 2014, 12:41 PM

slider2.zip

I got the same problem within a mobile view, I tried to destroy the slider, but this did not work, the slider froze.

I tried
- without destroy
- with destroy
- with destroy and remove

answered on 20 Oct 2014, 09:00 AM

Hello Can,

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="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

Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!

Sven

commented on 18 Jan 2022, 12:52 PM

Thanks - your code example helped me big time - but I see strange behaviour when applying that to the RangeSlider. I destroy() the old one, then change the surrounding wrapper and remove() it .. then draw the new rangeslider ... but to my surprise the min and max value get ignored, instead the rangeslider uses the value parameter.array as min and max. Do you know a way to prevent this behaviour?

Neli

commented on 20 Jan 2022, 09:27 AM

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

Sven

commented on 20 Jan 2022, 09:57 AM | edited

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) ..

Neli

commented on 24 Jan 2022, 08:25 AM

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

answered on 22 Oct 2014, 10:31 AM

Hello,

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