using angular 4 - no errors but I don't see the slider in the browser.

[indiadi]

I configured as the doc described. I also put the CSS include in the component: styleUrls: ['./my.component.css', '../../../node_modules/nouislider/distribute/nouislider.min.css'], I do see the slider element in the chrome developer tool. but I don't actually see it in the browser

[kiqq]

Check again, please. https://github.com/tb/ng2-nouislider/issues/99#issuecomment-327959697

[pmoprhy]

I'm having the same issue. I see the following element using chrome tools but the the element is not visible. nouislider _ngcontent-c2="" _nghost-c3="" ng-reflect-connect="true" ng-reflect-min="0" ng-reflect-max="15" ng-reflect-step="1" ng-reflect-ng-model="100,1000" ng-reflect-model="100,1000" class="ng2-nouislider ng-untouched ng-pristine ng-valid">

</nouislider

[kiqq]

@pmoprhy Could you show us your code and how did you import css styles?

[pmoprhy]

I added this html inside one of my own components <nouislider [connect]="true" [min]="0" [max]="15" [step]="1" [(ngModel)]="someRange" (ngModelChange)="onChange($event)">

I imported the style in my @Component @Component({ selector: 'app-esri-map', templateUrl: './esri-map.component.html', styleUrls: ['./esri-map.component.css','../app/app.component.css',"../../../../node_modules/nouislider/distribute/nouislider.min.css"] })

[kiqq]

Have you tried to import styles as in comment earlier provided:

to projectPath/src/styles.css add: @import "~nouislider/distribute/nouislider.min.css";

instead of your styleUrls: ['./esri-map.component.css','../app/app.component.css',"../../../../node_modules/nouislider/distribute/nouislider.min.css"] ??

[pmoprhy]

I tried that, get the same result. No errors in chrome dev tools, but no visible control.

[kiqq]

I honestly have no idea. It looks like css is not imported. Could you check in chrome if it is in place. It starts with comment like this /*! nouislider - 10.1.0 - 2017-07-28 13:09:54 */

Could you make project in stackblitz to investigate this issue?

[pmoprhy]

I figured out what was going on. I imported the style on the app component and didn’t have Encapsulation: ViewEncapsulation.None so it was removing the styling on my nested component.

So what worked for me was to add @import "../../../../node_modules/nouislider/distribute/nouislider.min.css";

In my app.component.css

And change the app.component.ts to import { Component ,ViewEncapsulation} from '@angular/core';

@Component({ selector: 'app', templateUrl: './app.component.html', styleUrls: ['./app.component.css'], encapsulation: ViewEncapsulation.None }) export class AppComponent { }

From: kiqq [mailto:notifications@github.com] Sent: Wednesday, February 7, 2018 2:53 PM To: tb/ng2-nouislider ng2-nouislider@noreply.github.com Cc: Michael Anderson manderson@geo-comm.com; Mention mention@noreply.github.com Subject: Re: [tb/ng2-nouislider] using angular 4 - no errors but I don't see the slider in the browser. (#141)

I honestly have no idea. It looks like css is not imported. Could you check in chrome if it is in place. It starts with comment like this /! nouislider - 10.1.0 - 2017-07-28 13:09:54 /

Could you make project in stackblitz to investigate this issue?

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHubhttps://github.com/tb/ng2-nouislider/issues/141#issuecomment-363906726, or mute the threadhttps://github.com/notifications/unsubscribe-auth/ABJqJfv0NHik2hrcuH51kdoqpxmMAP4Vks5tSg0wgaJpZM4RGiQF.