How to use the @material/slider/foundation 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 pgbross / vue-material-adapter / packages / mcwv-slider / slider.js View on Github external
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();
github pgbross / vue-material-adapter / packages / mcwv-slider / mdc-slider.js View on Github external
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();