I am trying to use this with angualar 4

I am using the angular cli. I have done npm install of ng2-nouislider and nouislider. later i done this. import { NouisliderModule } from ‘ng2-nouislider’; and in the angualr-cli.json i added the ~nouislider/distribute/nouislider.min.css"

this is my.ts import {Component, ViewChild, ElementRef, NgModule, VERSION} from ‘@angular/core’ import {BrowserModule} from ‘@angular/platform-browser’ import { NouisliderModule } from ‘ng2-nouislider’;

@Component({ selector: ‘my-app’, template: <nouislider #slider [config]="someKeyboardConfig"></nouislider> , }) export class App { @ViewChild(‘slider’, { read: ElementRef }) slider: ElementRef;

someKeyboardConfig: any = { behaviour: ‘drag’, connect: [true, true,true], start: [20, 40], keyboard: true, // same as [keyboard]=“true” step: 1, pageSteps: 10, // number of page steps, defaults to 10 range: { min: 0, max: 100 }, pips: { mode: ‘count’, density: 2, values: 6, stepped: true } }; ngAfterViewInit() { this.func(); }

func() { const connect = this.slider.nativeElement.querySelectorAll(‘.noUi-connect’); const classes = [‘c-1-color’, ‘c-2-color’, ‘c-3-color’]; console.log(connect.length); for ( let i = 0; i < connect.length; i++ ) { connect[i].classList.add(classes[i]); } } }

I cannot see the slider on html

in documentation of ng2-slider it says to add it in the system.config.js . and Unfortunately we donot have system.js in angular4 can you explain the steps how to use this library with webpack.

[kiqq]

1. Initial handle value start: [24, 34], or someRange = [24, 34];

2. Tooltips - create own formatter for day/days postfix: import { NouiFormatter } from "ng2-nouislider";

tooltips: [new MyFormatter, new MyFormatter],

export class MyFormatter implements NouiFormatter {
  to(value: number): string {
    let output = value + " Day";
    if (value != 1) { output += "s";}
    return output;
  }

  from(value: string): number {
    return Number(value.split(" ")[0]);
  }
}

1. Edit class “noUi-tooltip” for expected result in styles.css:

.noUi-tooltip{
    background-color: orange;
    color: white;
    padding: 10px 10px;
    border-radius: 0;
}

.noUi-tooltip::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    margin-left: -10px;
    border-width: 10px;
    border-style: solid;
    border-color: orange transparent transparent transparent;
}

1. Remove Chrome’s focus:

div:focus{
    outline: none;
}

[chandupurdue]

While dragging

On Wed, Dec 20, 2017 at 5:20 PM, Chandra Sekhar Nandipati < [e-mail]> wrote:

I am using version 9.0.0 in this when I dragging the tooltip is getting zoomed in. I donot want any action on tooltip

On Tue, Dec 19, 2017 at 2:50 PM, kiqq [e-mail] wrote:

Here is project created from earlier comments so you can check what is wrong in your code: https://stackblitz.com/edit/angular-yigy1l

— You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub https://github.com/tb/ng2-nouislider/issues/140#issuecomment-352867525, or mute the thread https://github.com/notifications/unsubscribe-auth/AXxC_qmLOHN61kHFPyDwfIJQC5VcFjtTks5tCBORgaJpZM4REdYB .