Methods

_destroy ()

destroy the range navigator widget

  • JAVASCRIPT
  • <div id="range"></div> 
    
    /// <reference path="tsfiles/jquery.d.ts" />
    /// <reference path="tsfiles/ej.web.all.d.ts" />
    
    module RangeNavigatorComponent {
        $(function () {
             var sample = new ej.datavisualization.RangeNavigator($("#RangeNavigator"), {
            //..//   
            });
           // destroy the range navigator
         sample.destroy(); 
        });
    });
    }

    Events

    load

    Fires on load of range navigator.

  • JAVASCRIPT
  • <script>
    
    //load event for range navigator
      $(function () {
            var sample = new ej.datavisualization.RangeNavigator($("#range"), {
                  load: function () {
                     //..//
                    }
                });
            });
           
    </script>

    loaded

    Fires after range navigator is loaded.

  • JAVASCRIPT
  • <script>
    
    //loaded event for  range navigator
      $(function () {
            var sample = new ej.datavisualization.RangeNavigator($("#range"), {
                  loaded: function () {
                     //..//
                    }
                });
            });
           
    </script>

    rangeChanged

    Fires on changing the range of range navigator.

  • JAVASCRIPT
  • <script>
    
    //rangeChanged event for  range navigator
      $(function () {
            var sample = new ej.datavisualization.RangeNavigator($("#range"), {
                  rangeChanged: function () {
                     //..//
                    }
                });
            });
           
    </script>

    scrollChanged

    Fires on changing the scrollbar position of range navigator.

  • JAVASCRIPT
  • <script>
    
    //scrollChanged event for  range navigator
      $(function () {
            var sample = new ej.datavisualization.RangeNavigator($("#range"), {
                  scrollChanged: function () {
                     //..//
                    }
                });
            });
           
    </script>

    scrollStart

    Fires on when starting to change the scrollbar position of range navigator.

  • JAVASCRIPT
  • <script>
    
    //scrollStart event for  range navigator
      $(function () {
            var sample = new ej.datavisualization.RangeNavigator($("#range"), {
                  scrollStart: function () {
                     //..//
                    }
                });
            });
           
    </script>

    selectedRangeStart

    Fires on when starting to change the slider position of range navigator.

  • JAVASCRIPT
  • <script>
    
    //selectedRangeStart event for  range navigator
      $(function () {
            var sample = new ej.datavisualization.RangeNavigator($("#range"), {
                  selectedRangeStart: function () {
                     //..//
                    }
                });
            });
           
    </script>

    selectedRangeEnd

    Fires when the selection ends in the range navigator

  • JAVASCRIPT
  • <script>
    
    //selectedRangeEnd event for  range navigator
      $(function () {
            var sample = new ej.datavisualization.RangeNavigator($("#range"), {
                  selectedRangeEnd: function () {
                     //..//
                    }
                });
            });
           
    </script>

    scrollEnd

    Fires on changes ending the scrollbar position of range navigator.

  • JAVASCRIPT
  • <script>
    
    //scrollEnd event for  range navigator
      $(function () {
            var sample = new ej.datavisualization.RangeNavigator($("#range"), {
                  scrollEnd: function () {
                     //..//
                    }
                });
            });
           
    </script>