Tricky multiple slider scenerio

2 posts, 1 answers
  1. troy
    troy avatar
    7 posts
    Member since:
    Nov 2011

    Posted 15 Nov 2011 Link to this post

    I have a dynamic list of sliders on a page and I am trying to limit the ability to increase sliders up to a defined amount.  

    For example: There are 3 sliders, and they range from 0-10. There is a voting limit variable that is set to 10.  How Can I disable all sliders from increasing if the total value of all sliders is equal to the main Voting limit?

    I know that my example here is very barebones, but I really need some help in determining the total of all the sliders and disabling only the increasing ability once it's reached.

    <script>
        var max_votes = 10;
        var sliderTotals = getSliderTotals(max_votes);
             
        function getSliderTotals(val){
            return val;    
        }
         
        function sliderOnSlide(e) {    
            // the current value of the slider
            var orig_value = this.value();
             
            // the new value
            var new_value = e.value;
             
            if(new_value > orig_value){
                new_max_votes = (max_votes - new_value);
            }
        }
     
        function sliderOnChange(e) {
            //console.log("Slide :: new slide value is: " + e.value);
        }
     
        $(document).ready(function() {
            $(".slider").kendoSlider({
                showButtons: false,
                change: sliderOnChange,
                slide: sliderOnSlide
            });    
        });
    </script>
  2. Answer
    Dimo
    Admin
    Dimo avatar
    8331 posts

    Posted 16 Nov 2011 Link to this post

    Hello Troy,

    The Slider is not designed to allow a maximum value, which is smaller than its "real" maximum value. In your case the only thing you can do is intercept the change event of the widget, calculate the sum of all Slider values and reduce the value of the currently manipulated Slider if needed.

    http://demos.kendoui.com/slider/events.html

    http://demos.kendoui.com/slider/api.html

    Best wishes,
    Dimo
    the Telerik team
    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
Back to Top