How do I update the slider max option after creation

6 posts, 0 answers
  1. Matthew
    Matthew avatar
    16 posts
    Member since:
    Aug 2011

    Posted 30 Oct 2013 Link to this post

    Looking through the API I am unable to find a way to change the minimum or maximum values of the slider after creation.  What is the best way to accomplish this (I need the maximum to be different depending on what item the user has selected)?
  2. Petur Subev
    Admin
    Petur Subev avatar
    1882 posts

    Posted 01 Nov 2013 Link to this post

    Hello Matthew,

    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
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  3. Kendo UI is VS 2017 Ready
  4. Can
    Can avatar
    5 posts
    Member since:
    Nov 2012

    Posted 16 Oct 2014 Link to this post

    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
  5. Petur Subev
    Admin
    Petur Subev avatar
    1882 posts

    Posted 20 Oct 2014 Link to this post

    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/kendo.dataviz.min.css" rel="stylesheet" />
        <!-- <script src="../kendo-ui-pro/js/angular.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!
     
  6. Can
    Can avatar
    5 posts
    Member since:
    Nov 2012

    Posted 22 Oct 2014 in reply to Petur Subev Link to this post

    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
  7. Petur Subev
    Admin
    Petur Subev avatar
    1882 posts

    Posted 24 Oct 2014 Link to this post

    Hello again,

    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
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
Back to Top
Kendo UI is VS 2017 Ready