Expanding sliders with Kendo UI.

Reading time ~2 minutes

I’ve starting hitting walls with Kendo UI not supporting some expected functionality. The Angular UI Slider makes it easy change the configuration options at run time and thereby change the min and max settings. I’m hugely disappointed that there isn’t a way to do this seamlessly with the Kendo UI slider. I was hoping this was a case of me needing to RTFM but my forum post confirmed that I can’t “refresh” the slider.

The current recommended hack is to call the destroy function, remove it from the DOM, and then recreate the slider. That isn’t slick but I have a job to do so here we go:

<div kendo-slider="baddassSlider" expanding-slider="[100, 300, 700, 1500]"></div>
(function () {
  angular
    .module('kendoExtensions', [])
    .directive('expandingSlider', expandingSlider);
   
  expandingSlider.$inject = ['$compile'];
    
  function expandingSlider() {
    return {
      restrict: 'A',
      link: function (scope, el, attrs) {
        var increments = scope.$eval(attrs.expandingSlider).slice();
        var $el = $(el);
        
        var unbindWatch = scope.$watch(function () {
          return scope[attrs.kendoSlider];
        }, function(slider) {
          if (angular.isDefined(slider)) {
            unbindWatch();
            bindSliderBehavior(slider);
          }
        });
        
        function bindSliderBehavior(slider) {
          scope.$watch(function () {
            return slider.value();
          }, function (newSliderVal) {
            var max = attrs.kMax;
            
            if (newSliderVal && newSliderVal >= max && increments.length > 0) {
              var newMax = getNextIncrement(newSliderVal);
              $el.attr('k-max', newMax);
              $el.attr('k-small-step', newMax / 100);
              $el.attr('increasing-slider', '[' + increments.toString() + ']');
              var html = $el.get(0).outerHTML;
              
              slider.destroy();
              
              var newSlider = $compile(html)(scope);
              newSlider.attr('style', '');
              delete scope[attrs.kendoSlider];
              $el.parents('.k-slider').replaceWith(newSlider);
            }
          });
        }
        
        function getNextIncrement(currentValue) {
          var nextIncrement;
    
          do {
            nextIncrement = increments.shift();
            if (!nextIncrement) {
                nextIncrement = currentValue;
            }
          } while (nextIncrement < currentValue);
    
           return nextIncrement;
        }
      }
    };
  }
})();

Up and Running with ReactJS

I started the ReactJS-OC meetup group this month and we just had our first gathering.I presented on the fundamental concepts of ReactJS a...… Continue reading

Freelancing Inspiration

Published on June 09, 2015

Accessing Kendo UI widgets in AngularJS

Published on June 04, 2015