noUIslider не работает в веб-компоненте polymer 3 (litelement) - PullRequest
Новая
       46

noUIslider не работает в веб-компоненте polymer 3 (litelement)

1 голос
/ 21 марта 2019

Я хотел бы знать, как реализовать noUiSlider в веб-компоненте, таком как Polymer 3 / LitElement, я попробовал приведенный ниже код, который получил ошибку как nouislider.create is not function, и сервер завершился с ответом как non-JavaScript MIME type of "text/css". 

import { LitElement, html } from 'https://unpkg.com/@polymer/lit-element/lit-element.js?module';
import * as  noUiSlider  from 'https://unpkg.com/nouislider/distribute/nouislider.min.js'
export class Filters extends LitElement { 
  constructor() {
    super();
   this.slider();
  }

  slider(){
    var range = document.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 = document.getElementById('value-input'),
    valueSpan = document.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"></div>   
    
    `;

1 Ответ

1 голос
/ 21 марта 2019

Из-за времени рендеринга HTML выдается ошибка. Таким образом, вы можете использовать как следует; * Также проверьте, как ссылаться на элемент в тени this.shadowRoot.getElementById('range') вместо document.getElementById

ДЕМО 

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);
...