noUiSlider

[snarum]

Anyone tried to get the noUiSlider form input field to work? there is one bundled with the npm for materialize-css that is styled (under the folder 'extras'). I get the styles to work, but the javascript events seems to be ignored. There is no circular dots or buble that should appear when clicking the slider bar.

Snorre

[taylorpage]

If you have correctly installed the materialize-css package then you have access to the noUiSlider global variable. To access this in angular you have to declare a variable.

slider.component.ts

import { Component, OnInit, ViewChild, ElementRef } from '@angular/core';

// Here's your declaration
declare const noUiSlider;

@Component({ ... })
export class SliderComponent implements OnInit {

  // Access your html reference
  @ViewChild('slider') slider: ElementRef;

  ngOnInit() {
    this.createNoUiSlider();
  }

  createNoUiSlider() {
    noUiSlider.create(this.slider.nativeElement, {
      start: [20, 80],
      connect: true,
      step: 1,
      range: {
        'min': 0,
        'max': 100
      }
     });
  }
}

slider.component.html

<div #slider id="slider"></div>

Try that out, better configuration docs here: https://materializecss.com/range.html and here: https://refreshless.com/nouislider/

[jaimeplier]

Hi, I'm having an issue implementing this, my other materialize components are working correctly but when I try the above I get " noUiSlider is not defined at ...".

Currently my app.module has this: import { MaterializeModule } from 'angular2-materialize';

imports: [ MaterializeModule ]

Do I need to import something else like materialize-css in the imports again since it's in the extras folder or do something else?

[jaimeplier]

Update: I got the simplest one to show, when I use this in my .html file I get the simple one with one selector:

<form action="#">
                    <p class="range-field">
                        <input #slider type="range" id="slider"
                         min="1000" max="10000" step="100" />
                    </p>
                </form>

Of course I can't use the create method from noUiSlider here. Also this slider works without having anything initializing it in my Ts file. Tryied reaching it with ngOnInit() { this.slider.nativeElement.connect = true; this.slider.nativeElement.start = [5000, 6000]; } which didn't work lol. Any idea is very appreciated!