How to use @material/slider - 10 common examples

setTrackMarkers: (step, max, min) => {
        const stepStr = step.toLocaleString();
        const maxStr = max.toLocaleString();
        const minStr = min.toLocaleString();
        // keep calculation in css for better rounding/subpixel behavior
        const markerAmount = `((${maxStr} - ${minStr}) / ${stepStr})`;
        const markerWidth = `2px`;
        const markerBkgdImage = `linear-gradient(to right, currentColor ${markerWidth}, transparent 0)`;
        const markerBkgdLayout = `0 center / calc((100% - ${markerWidth}) / ${markerAmount}) 100% repeat-x`;
        const markerBkgdShorthand = `${markerBkgdImage} ${markerBkgdLayout}`;
        this.$set(this.markerBkgdShorthand, 'background', markerBkgdShorthand);
      },
      isRTL: () => getComputedStyle(this.$el).direction === 'rtl',
    };

    this.foundation = new MDCSliderFoundation(adapter);
    this.foundation.init();

    this.foundation.setDisabled(this.disabled);

    if (Number(this.min) <= this.foundation.getMax()) {
      this.foundation.setMin(Number(this.min));
      this.foundation.setMax(Number(this.max));
    } else {
      this.foundation.setMax(Number(this.max));
      this.foundation.setMin(Number(this.min));
    }
    this.foundation.setStep(Number(this.stepSize));
    this.foundation.setValue(Number(this.value));

    if (this.hasMarkers) {
      this.foundation.setupTrackMarker();

},
    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;

public componentDidMount() {
    super.componentDidMount();
    if (this.control) {
      this.MDComponent = new MDCSlider(this.control);
      this.MDComponent.listen('MDCSlider:change', this.onChange);
      this.MDComponent.listen('MDCSlider:input', this.onInput);
    }
    this.setValue(this.props.value); // set initial value programatically because of error if min is greater than initial max
  }

getDefaultFoundation() {
    // prettier-ignore
    return new MDCSliderFoundation({
      hasClass: helper.hasClass('rootProps', this),
      addClass: helper.addClass('rootProps', this),
      removeClass: helper.removeClass('rootProps', this),
      getAttribute: helper.getAttr('rootProps', this),
      setAttribute: helper.setAttr('rootProps', this),
      removeAttribute: helper.rmAttr('rootProps', this),
      computeBoundingRect: () => this.root_.getBoundingClientRect(),
      getTabIndex: () => this.root_.tabIndex,
      registerInteractionHandler: helper.registerHandler('rootProps', this),
      deregisterInteractionHandler: helper.deregisterHandler('rootProps', this),
      registerThumbContainerInteractionHandler: helper.registerHandler('thumbContainerProps', this),
      deregisterThumbContainerInteractionHandler: helper.deregisterHandler('thumbContainerProps', this),
      registerBodyInteractionHandler: helper.registerHandler(document.body),
      deregisterBodyInteractionHandler: helper.deregisterHandler(document.body),
      registerResizeHandler: helper.registerHandler(window, 'resize'),
      deregisterResizeHandler: helper.deregisterHandler(window, 'resize'),

setLastTrackMarkersStyleProperty: (propertyName: string, value: any) => {
        if (this.root.ref) {
          // We remove and append new nodes, thus, the last track marker must be dynamically found.
          const lastTrackMarker = this.root.ref.querySelector(
            MDCSliderFoundation.strings.LAST_TRACK_MARKER_SELECTOR
          );
          lastTrackMarker &&
            lastTrackMarker.style.setProperty(propertyName, value);
        }
      },
      isRTL: () =>

setLastTrackMarkersStyleProperty: (propertyName, value) => {
        // We remove and append new nodes, thus, the last track marker must be dynamically found.
        const lastTrackMarker = this.root_.querySelector(MDCSliderFoundation.strings.LAST_TRACK_MARKER_SELECTOR);
        lastTrackMarker.style.setProperty(propertyName, value);
      },
      isRTL: () => getComputedStyle(this.root_).direction === 'rtl',

_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();
        }
    }

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();
    }

setMarkerValue: value => {
        this.markerValue = value;
      },
      appendTrackMarkers: numMarkers => {
        this.numMarkers = numMarkers;
      },
      removeTrackMarkers: () => {
        this.numMarkers = 0;
      },
      setLastTrackMarkersStyleProperty: (propertyName, value) => {
        this.$set(this.lastTrackMarkersStyles, propertyName, value);
      },
      isRTL: () => getComputedStyle(this.$el).direction === 'rtl',
    };

    this.foundation = new MDCSliderFoundation(adapter);
    this.foundation.init();

    this.foundation.setDisabled(this.disabled);

    if (Number(this.min) <= this.foundation.getMax()) {
      this.foundation.setMin(Number(this.min));
      this.foundation.setMax(Number(this.max));
    } else {
      this.foundation.setMax(Number(this.max));
      this.foundation.setMin(Number(this.min));
    }
    this.foundation.setStep(Number(this.stepSize));
    this.foundation.setValue(Number(this.value));

    if (this.hasMarkers) {
      this.foundation.setupTrackMarker();

attached() {
    this.topAppBar = new MDCTopAppBar(
      document.querySelector('.mdc-top-app-bar')
    );
    this.drawer = new MDCDrawer(document.querySelector('.mdc-drawer'));

    this.slider = new MDCSlider(this.slider);
    this.sliderDisabled = new MDCSlider(this.sliderDisabled);
    this.sliderDiscrete = new MDCSlider(this.sliderDiscrete);
    this.sliderDiscreteDisabled = new MDCSlider(this.sliderDiscreteDisabled);
    this.slidertick = new MDCSlider(this.sliderTick);
    this.slidertickDisabled = new MDCSlider(this.sliderTickDisabled);

    this.tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));

    this.handleTopAppBarWithDrawer();
    this.handleSliders();
  }