I am trying to use this with angualar 4

[chandupurdue]

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]

in app.module.ts (not in my.ts):

import { NouisliderModule } from 'ng2-nouislider';`
 //and 
 imports: [
    BrowserModule,
    FormsModule,
    NouisliderModule //<=========
  ]

For step by step see my comment: https://github.com/tb/ng2-nouislider/issues/99#issuecomment-327959697

[chandupurdue]

I used this but the two thumbs on the slider getting merged when i am running it with angular4

[kiqq]

I've checked your code in Angular 4 and 5 in Chrome and Firefox and it works for me as intended for the drag behaviour - handles move together when dragged between them and separately when touched directly. What is exactly the behaviour you've experienced?

[chandupurdue]

Thanks for quick reply I missed some part of code never mind

[kiqq]

You're welcome. Please close issue if everything is ok.

[chandupurdue]

Hello, I have one more question

<nouislider #slider [config]="someKeyboardConfig"[(ngModel)]="someRange" (change)="triggerUpdate($event)">

someKeyboardConfig: any = { behaviour: 'drag', connect: [true, true, true], tooltips: [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 } }

This is an example in which I have two sliders.The tooltips are showing the whole numbers. can you say me how to make the tooltips for 24 days and 34 days?

the tooltips are in the square box. Can you help me how to prepare a tooltip attached to the attachment. And in the tooltip, I don't need any focus while dragging

quick response is always appreciated I mean I am implementing this for the first time. So I will definitely close once these are solved I am using 9.0.0

[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]);
  }
}

3. 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;
}

4. Remove Chrome's focus:

div:focus{
    outline: none;
}

[chandupurdue]

Can I have two different tooltips for two different handles and getting the thumb in a different way I need that in the same color and that too in the circular.Please refer the screenshot attached

[kiqq]

Sorry but I will not make everything for you. Everything that was specific for slider was solved. Everything else is just CSS. Consider it as your own challenge.

Tips for you:

1. Use Google. E.g. "css make circle"
2. Use inspect option in your browser to see what selector you can use and what to override.
3. You can modify your own code from func() for applying CSS classes also to tooltips and hadles.
4. Handles have attribute data-handle that you can use for making selector specific for each handle.

[chandupurdue]

Sorry I apologize The last question is on click the tooltip is getting extended while dragging. I didn't want that tooltip drag it must stay as it was

[kiqq]

Could you make a screenshot? How does it work in different browser?

[chandupurdue]

I apologize for bothering you. Please see the screenshot. When I am dragging it the tooltip becomes bigger than the other and it becomes really big

On Tue, Dec 19, 2017 at 2:29 PM, Chandra Sekhar Nandipati < [email protected]> wrote:

I apologize for bothering you. Please see the screenshot. When I am dragging it the tooltip becomes bigger than the other and it becomes really big

On Tue, Dec 19, 2017 at 2:14 PM, kiqq [email protected] wrote:

Could you make a screenshot? How does it work in different browser?

— 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-352858173, or mute the thread https://github.com/notifications/unsubscribe-auth/AXxC_g5NY3-bqjDnRDY95o6h2sAcMEJlks5tCAsQgaJpZM4REdYB .

[kiqq]

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

[chandupurdue]

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 [email protected] 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 .

[chandupurdue]

While dragging

On Wed, Dec 20, 2017 at 5:20 PM, Chandra Sekhar Nandipati < [email protected]> 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 [email protected] 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 .