question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Angular 5.2.1 - slider doesn't show

See original GitHub issue

Hello, I was looking for a good looking slider for my project and I found this one but the slider doesn’t show and I’m not sure wheither it’s my fault or not.

app.module.ts:

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { NouisliderModule } from 'ng2-nouislider';
import { AppComponent } from './app.component';


@NgModule({
    declarations: [
        AppComponent
    ],
    imports: [
        BrowserModule,
        NouisliderModule
    ],
    providers: [],
    bootstrap: [AppComponent]
})
export class AppModule { }

app.component.css:

@import "~nouislider/distribute/nouislider.min.css";
...

app.component.html:

<nouislider [connect]="true" [min]="0" [max]="15" [(ngModel)]="inputSpeedRange"></nouislider>

app.component.ts:

public inputSpeedRange = [4, 80];

Issue Analytics

  • State:closed
  • Created 6 years ago
  • Comments:9

github_iconTop GitHub Comments

7reactions
kiqqcommented, Feb 3, 2018

Do you have FormsModule imported in app.module.ts?

5reactions
kiqqcommented, Jan 30, 2018

Move @import "~nouislider/distribute/nouislider.min.css"; to styles.css.

Read more comments on GitHub >

github_iconTop Results From Across the Web

bootstrap image carousel does not work in angular
I have tried using different types of bootstrap carousel but to no avail. I saw some answers which suggested to add jQuery and...
Read more >
How to fix bootstrap carousel if it loads but doesn't ... - YouTube
I was driven crazy by bootstrap for over an hour while setting up the carousel. I tried a bunch of different things with...
Read more >
Getting started | Angular Material
For help getting started with a new Angular app, check out the Angular CLI. For existing apps, follow these steps to begin using...
Read more >
Web Libraries in Jars - WebJars
angular -slider-prajwalkman, org.webjars, angular-slider-prajwalkman, 0.1.6 ... angular-bootstrap-show-errors, org.webjars.bower, angular-bootstrap-show- ...
Read more >
Swiper Changelog
a11y: don't focus slide on slide inner elements clicks (c8e22f7), closes #6116 ... angular: pagination true should work (434a19c); angular: update value ...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found