v7.3.0

TimeZoomSlider
Widget

A slider widget for controlling the zoom level of a Scheduler, SchedulerPro, or Gantt component using the smooth zoom system. This widget provides fine-grained control over zoom levels by interpolating between view presets.

This widget requires smoothZoom to be enabled on the connected timeline component.

Add it to the component's toolbar to connect it automatically:

new Scheduler({
    smoothZoom : true,
    tbar : [
        { type : 'timezoomslider' }
    ]
});

Or specify which Scheduler, SchedulerPro or Gantt component instance it should connect to using the client config:

const scheduler = new Scheduler({
    smoothZoom : true,
    // ...
});

const timeZoomSlider = new TimeZoomSlider({ appendTo : 'someElement', client : scheduler });
No results

Configs

Configs are options you supply in a configuration object when creating an instance of this class
  • The Scheduler, SchedulerPro or Gantt component instance to connect to. If not provided, the widget will attempt to find a timeline component by traversing up the widget hierarchy or querying for one.

  • The maximum zoom level. If not specified, uses the scheduler's maxSmoothZoomLevel.

  • The minimum zoom level. If not specified, uses the scheduler's minSmoothZoomLevel.

  • Whether to show tooltip while dragging.

  • Whether to show the current value in a tooltip or label.

  • thumbIcon : Stringb-icon b-icon-zoom

    The icon to use for the slider thumb.

    Has a corresponding runtime thumbIcon property.

Properties

Properties are getters/setters or publicly accessible variables on this class

Functions

Functions are methods available for calling on the class
    • onInternalChange( )
      private

      Called when the slider drag operation completes.

    • onInternalInput( )
      private

      Called when the slider value changes during dragging (continuous updates).

    • Called when the scheduler's zoom level changes from an external source.

    type: timezoomslider

    Source path

    Scheduler/widget/TimeZoomSlider.js

    Contents