How to use the @material/slider.MDCSliderFoundation function in @material/slider

To help you get started, we’ve selected a few @material/slider examples, based on popular ways it is used in public projects.

Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.

github angular / components / src / material-experimental / mdc-slider / slider.ts View on Github external
},
    setMarkerValue:
        () => {
          // Mark the component for check as the thumb label needs to be re-rendered.
          this._changeDetectorRef.markForCheck();
        },
    setTrackMarkers:
        (step, max, min) => {
          this._trackMarker.nativeElement.style.setProperty(
              'background', this._getTrackMarkersBackground(min, max, step));
        },
    isRTL: () => this._isRtl(),
  };

  /** Instance of the MDC slider foundation for this slider. */
  private _foundation = new MDCSliderFoundation(this._sliderAdapter);

  /** Whether the MDC foundation has been initialized. */
  private _isInitialized = false;

  /** Function that notifies the control value accessor about a value change. */
  private _controlValueAccessorChangeFn: (value: number) => void = () => {};

  /** Subscription to the Directionality change EventEmitter. */
  private _dirChangeSubscription = Subscription.EMPTY;

  /** Function that marks the slider as touched. Registered via "registerOnTouch". */
  _markAsTouched: () => any = () => {};

  @ViewChild('thumbContainer') _thumbContainer: ElementRef;
  @ViewChild('track') _track: ElementRef;
  @ViewChild('pinValueMarker') _pinValueMarker: ElementRef;
github src-zone / material / bundle / src / components / slider / mdc.slider.directive.ts View on Github external
_onChanges(changes: SimpleChanges, callValueAccessorOnValueChange = true) {
        if (this._initialized) {
            if (this.isChanged('discrete', changes) || this.isChanged('markers', changes)) {
                this.foundation.destroy();
                this.initElements();
                this.initDefaultAttributes();
                this.foundation = new MDCSliderFoundation(this.mdcAdapter);
                this.foundation.init();
            }
            this.updateValues(changes, callValueAccessorOnValueChange);
            this.updateLayout();
        }
    }
github src-zone / material / bundle / src / components / slider / mdc.slider.directive.ts View on Github external
this._rndr.appendChild(this._elmTrackMarkerCntr, frag);
            }
        },
        removeTrackMarkers: () => {
            if (this._elmTrackMarkerCntr)
                while (this._elmTrackMarkerCntr.firstChild)
                    this._rndr.removeChild(this._elmTrackMarkerCntr, this._elmTrackMarkerCntr.firstChild);
        },
        setLastTrackMarkersStyleProperty: (propertyName: string, value: string) => {
            const lastTrackMarker = this._root.nativeElement.querySelector('.mdc-slider__track-marker:last-child');
            if (lastTrackMarker)
                this._rndr.setStyle(lastTrackMarker, propertyName, value);
        },
        isRTL: () => getComputedStyle(this._root.nativeElement).direction === 'rtl'
    };
    private foundation: MdcSliderFoundationInterface = new MDCSliderFoundation(this.mdcAdapter);

    constructor(private _rndr: Renderer2, private _root: ElementRef, private _registry: MdcEventRegistry) {
    }

    ngAfterContentInit() {
        this.initElements();
        this.initDefaultAttributes();
        this.foundation.init();
        this._lastWidth = this.mdcAdapter.computeBoundingRect().width;
        this.updateValues({}, true);
        this._initialized = true;
    }

    ngAfterViewInit() {
        this.updateLayout();
    }
github trimox / angular-mdc-web / packages / slider / slider.ts View on Github external
}
        this.trackMarkerContainer!.nativeElement.appendChild(docFrag);
      },
      removeTrackMarkers: () => {
        while (this.trackMarkerContainer!.nativeElement.firstChild) {
          this.trackMarkerContainer!.nativeElement.removeChild(this.trackMarkerContainer!.nativeElement!.firstChild!);
        }
      },
      setLastTrackMarkersStyleProperty: (propertyName: string, value: string) => {
        const lastTrackMarker =
          this._getHostElement().querySelector(strings.LAST_TRACK_MARKER_SELECTOR);
        lastTrackMarker!.style.setProperty(propertyName, value);
      },
      isRTL: () => getComputedStyle(this._getHostElement()).direction === 'rtl'
    };
    return new MDCSliderFoundation(adapter);
  }
github jamesmfriedman / rmwc / src / slider / index.tsx View on Github external
getDefaultFoundation() {
    return new MDCSliderFoundation({
      hasClass: (className: string) => this.root.hasClass(className),
      addClass: (className: string) => this.root.addClass(className),
      removeClass: (className: string) => this.root.removeClass(className),
      getAttribute: (name: string) =>
        this.root.getProp(name as any) as string | null,
      setAttribute: debounce(
        (name: string, value: any) => this.root.setProp(name as any, value),
        300
      ),
      removeAttribute: (name: string) => this.root.removeProp(name as any),
      computeBoundingRect: () =>
        this.root.ref
          ? this.root.ref.getBoundingClientRect()
          : ({} as ClientRect),
      getTabIndex: () => (this.root.ref ? this.root.ref.tabIndex : 0),
      registerInteractionHandler: (