Question

我想知道如何在类似Polymer 3 / LitElement的Web组件中实现noUiSlider，我尝试了以下代码，错误为nouislider.create is not function，服务器以响应{{1}结尾}。

non-JavaScript MIME type of "text/css"

Answer 1

由于HTML的渲染时间，引发en错误。因此，您可以按照以下方式使用： *另请检查如何在阴影dom this.shadowRoot.getElementById('range')而非document.getElementById

中引用元素

DEMO

import { LitElement, html } from '@polymer/lit-element'; 
import {afterNextRender } from '@polymer/polymer/lib/utils/render-status.js';
import * as  noUiSlider  from 'https://unpkg.com/nouislider/distribute/nouislider.min.js'

class MyFilters extends LitElement { 

  constructor() {
    super();
     afterNextRender(this, ()=>{ 
          this.slider();
    })
  }

  slider(){

     var range = this.shadowRoot.getElementById('range');

     noUiSlider.create(range, {
        start: [ 20, 80 ], // Handle start position
        step: 10, // Slider moves in increments of '10'
        margin: 20, // Handles must be more than '20' apart
        connect: true, // Display a colored bar between the handles
        direction: 'rtl', // Put '0' at the bottom of the slider
        orientation: 'vertical', // Orient the slider vertically
        behaviour: 'tap-drag', // Move handle on tap, bar is draggable
        range: { // Slider can select '0' to '100'
            'min': 0,
            'max': 100
        },
        pips: { // Show a scale with the slider
            mode: 'steps',
            density: 2
        }
    });

    var valueInput = this.shadowRoot.getElementById('value-input'),
    valueSpan = this.shadowRoot.getElementById('value-span');

    // When the slider value changes, update the input and span
    range.noUiSlider.on('update', function( values, handle ) {
        if ( handle ) {
            valueInput.value = values[handle];
        } else {
            valueSpan.innerHTML = values[handle];
        }
    });

    // When the input changes, set the slider value
    valueInput.addEventListener('change', function(){
        range.noUiSlider.set([null, this.value]);
    });
  }

  render() {
    return html` 
     <div id="range">
     <span id="value-span"></span>
     <input id="value-input"/>  
     </div> 
    `;
  }
}
customElements.define('my-filters', MyFilters);

noUIslider在Web组件中无法工作-聚合物3（精简版）

1 个答案: