How to use @antv/gui - 3 common examples

private renderSlider(): void {
    if (!this.slider) {
      this.container = this.canvas.addGroup();
      this.slider = new Slider(this.getSliderConfig());
      this.slider.on('sliderchange', this.onChangeFn);
      this.container.add(this.slider);
    } else {
      this.slider.update(this.getSliderConfig());
    }
  }

public render(): void {
    if (!this.container) {
      this.container = this.getCanvasController().canvas.addGroup();
    }
    if (this.slider) {
      this.slider.off('sliderchange', this.onChange);
      this.slider.remove(true);
    }
    this.slider = new Slider(this.getSliderConfig());
    this.slider.on('sliderchange', this.onChange);
    this.container.add(this.slider);

    this.getCanvasController().canvas.draw();
  }

private renderScrollbar(): void {
    const config: Required = getValidScrollBarConfig(this.getInteractionConfig());
    const range: BBox = this.getRange();
    const isHorizontal = config.type !== 'vertical';
    const panelRange: BBox = this.view.get('panelRange');
    const [paddingTop, , , paddingLeft] = config.padding;
    const position = isHorizontal
      ? { x: panelRange.minX + paddingLeft, y: range.tl.y + paddingTop }
      : { x: range.tl.x + paddingLeft, y: panelRange.minY + paddingTop };

    if (!this.scrollBar) {
      this.container = this.canvas.addGroup();
      this.scrollBar = new ScrollBar({
        isHorizontal,
        trackLen: this.trackLen,
        thumbLen: this.thumbLen,
        position,
        thumbOffset: this.ratio * this.trackLen,
      });
      this.container.add(this.scrollBar);
      this.scrollBar.set('zIndex', SCROLL_BAR_Z_INDEX);
      this.scrollBar.on('scrollchange', this.onChangeFn);
    } else {
      this.scrollBar.updateTrackLen(this.trackLen);
      this.scrollBar.updateThumbLen(this.thumbLen);
      this.scrollBar.updateScrollBarPos(position);
      this.scrollBar.updateThumbOffset(this.thumbOffset);
    }
  }