Slider in angular 6

Question

I am new to Angular and are trying to implement a double slider. I tried follow this sample:

https://angular-slider.github.io/ng5-slider/demos I add following:

html:

<p>Value: <input type="text" [(ngModel)]="value"></p>
<ng5-slider [(value)]="value" [options]="options"></ng5-slider>

And this in my class:

import { Ng5SliderModule } from 'ng5-slider';
import { Options } from 'ng5-slider';

 value: number = 100;
 options: Options = {
   floor: 0,
   ceil: 250
 };

Error:

Error: Template parse errors:
compiler.js:1021
Can't bind to 'value' since it isn't a known property of 'ng5-slider'.
1. If 'ng5-slider' is an Angular component and it has 'value' input, then verify that it is part of this module.
2. If 'ng5-slider' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.

My question are going to be a little blurry. Normally I would find some kind of bootstrap component and implement that in my html and javascript. But as I understand when working with Angular, you primary work with angular components. Is there something similar for bootstrap for Angular. I looked at Material but it didn't have double slider. Also can anyone recommend something to a get a double slider working?

Answer 1

There are many bootstrap like packages for angular but there is no problem with the one you've picked for double slider.

From the error you've got we can see that you didn't add the Ng5SliderModule to your NgModule:

import { Ng5SliderModule } from 'ng5-slider';

...

@NgModule({
  ...
  imports: [
     ...
     Ng5SliderModule,
     ...
  ],
  ...
})
export class AppModule {}

You can see the docs of ng5-slider git repository for more details.